Question

所以，使用Mozilla和WebKit，我有一个不错的解决方案，使用select替换appearance: none;框中的箭头并具有父元素。

在大多数情况下，我禁用了此功能。对于IE10，我实际上无法禁用它，因为我的条件注释实际上不起作用。

这是我的标记：

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]>    <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->

类ie10plus实际上并没有使它成为标记。

我也觉得可能有合法的方法来替换IE中的箭头。我并不反对实际解决这个问题。 appearance: none;然而不起作用。那我该怎么办？

Answer 1

避免浏览器嗅探和条件注释（从Internet Explorer 10开始不支持），而是采用更标准的方法。对于此特定问题，您应该定位::-ms-expand伪元素：

select::-ms-expand {
    display: none;
}

Answer 2

但是！如果我们想要增加宽度，我们不能这样做：

display:none

所以

select::-ms-expand {
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 /* IE 5-7 */
 filter: alpha(opacity=0);
 /* Good browsers :) */
 opacity:0;
}

Answer 3

Internet Explorer 10 doesn't support conditional comments，所以你必须做别的事情。一种解决方案是使用JavaScript嗅探用户代理并自行添加类：

<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    document.documentElement.className += " ie10";
}
</script>

您可能应该在<head>中添加此内容，这样您就不会有一些没有样式的内容，但这可能不是问题。

另外，如果你正在使用jQuery，你可能想要做这样的事情：

if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    $("html").addClass("ie10");
}

如果您要检查IE10或更高版本，请复制粘贴getInternetExplorerVersion函数from this Microsoft page，然后将if更改为以下内容：

if (getInternetExplorerVersion() >= 10) {
    // whatever implementation you choose
}

Answer 4

我在使用 Zurb Foundation 的IE 10和11网站上的隐藏下拉箭头出现了问题。 _form.scss上有一行

select::-ms-expand {
    display: none;
}

我删除了，并且下拉箭头开始在所有broswers上正常显示。感谢Jonathan在这里给出答案。在经过大量搜索后，这对我有所帮助。

Answer 5

仍然不确定你想要完成什么，但这将检测并添加ie10的类：


删除IE10选择元素箭头

5 个答案: