html下拉菜单<select>在Opera上缺少填充

在IE9，Firefox和Chrome上，我的下拉列表看起来很棒。但Opera的缺少2-3像素的填充，并且我在这些菜单中有一些单字符条目的表单，看起来很糟糕。html下拉菜单<select>在Opera上缺少填充

任何一方的空间都会让它看起来不错，但在其他浏览器上看起来不好，而且会使我的脚本搞砸。

2011-09-25 Steven Lu

你可以创建一个jsfiddle页面或给我们一个链接来查看问题？ – hallvors

已更新的答案。 –

我所做的仅仅是创建这个检测iOS设备：

138  (function() { 
139   // ios detection (select menus are ugly) 
140   if (navigator.userAgent.toLowerCase().search('iphone') != -1 || navigator.userAgent.toLo werCase().search('ipod') != -1 || navigator.userAgent.toLowerCase().search('ipad') != -1) { 
141    // set css rule for input 
142    var style = document.createElement('style'); 
143    style.setAttribute('type','text/css'); 
144    style.innerHTML = 'select{ color: #333; }'; // custom css for select on ios 
145    document.getElementsByTagName('head')[0].appendChild(style); 
146   } 
147  })();

我想我能为歌剧做大同小异。

至于原来的问题，我做了一个新的网站，测试问题：

1 <head><style type='text/css'> 
2 select { 
3  background-color: #353535; 
4  border: 2px solid #555555; 
5  color: #c0c0c0; 
6 } 
7 </style></head><body> 
8 <select> 
9  <option>0</option> 
10 </select></body>

发生了什么事是，当我设置修改边框或背景色的选择风格，它改变整洁的外观下拉菜单样式到一个老式的看起来更方形的按钮，也摆脱了一些填充。但是，没有人会使用Opera，所以我可能永远不会“解决”问题。

来源

2011-09-27 00:16:29

很难说没有代码。

但是，你可以使用jQuery的目标只有Opera：

if($.browser.opera){ 
    $('select').css(//DO WHATEVER); 
}

这将使其他浏览器不变。

Fwiw ...我会检查你的访客统计。 Opera的使用可能非常低/不存在，修复可能是不必要的。

来源

2011-09-25 23:59:12

感谢您的演示。将某些样式添加到SELECT具有副作用，看起来像布局错误。那么添加如下内容：

width: 2em; 
    text-align:center;

？我没有在其他浏览器中测试过它，但它应该只是“加强”我想它们的默认渲染..

来源

2011-10-31 11:06:44 hallvors

html下拉菜单<select>在Opera上缺少填充

回答

相关问题