IE10 / Windows 8 奇怪的轮廓和所有元素的框阴影效果

Question

如果有人可以提供帮助，那就太好了。我在 IE10/Win8 上遇到了奇怪的渲染问题。在包括 IE10/Win7 在内的所有其他浏览器中一切正常，但 IE10/Win8 在选择或悬停在所有元素上时会显示奇怪的轮廓或框阴影。

我尝试在*:active, *:focus, *:hover 上将所有元素(*) 设置为outline:none 或outline:transparent 均无济于事。我也禁用了过渡，但效果仍然出现。我将 Twitter Bootstrap 与其他自定义样式一起使用。不过，所有转换都是通过 Bootstrap 进行的。

IE10 不支持条件语句，所以我运行以下脚本将 ie10 类添加到 html 并添加特定于 IE10 的样式。

$(document).ready(function(){

    if( ($.browser.msie) && ($.browser.version == "10.0") ){
        $('html').addClass('ie10');
    }

});

还是不行。我附上了我面临的问题的屏幕截图（仅限 IE10 / Win 8）。

这是文本框的一些示例代码：

HTML

<div class="input-placeholder">
    <input autofocus="autofocus" class="input-medium" id="user_full_name" name="user[full_name]" size="30" tabindex="1" type="text" value="Sagar Patil">
    <a href="#" class="error-msg hide" rel="popover" data-placement="right" data-content="" tabindex="104" data-original-title=""></a>
</div>

CSS

.input-placeholder {
position: relative;
}

#profile .input-medium, #local-testing .input-medium {
width: 344px;
color: #a16d1d;
padding: 10px 13px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}

引导样式

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background: #fdf7ed;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-o-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
display: inline-block;
height: 20px;
padding: 13px;
margin-bottom: 13px;
font-size: 18px;
line-height: 20px;
border: 1px solid #a4875d;
color: #a16d1d;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}

以下是绿色按钮的样式：

HTML

<div class="col3 pull-right">
    <a href="#" class="plan_choose btn btn-modal-plan btn-upgrade" data-planinfo="Power Corporate|$350|50 users||45" data-product-type="live_testing" id="plan_45">Upgrade</a>
</div>

CSS

.plans div[class*="col"] {
float: left;
}

.plans .col3 {
width: 94px;
}

.btn-upgrade, .btn-repurchase, .modal-body .btn-upgrade, .modal-body .btn-repurchase {
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.25);
background-color: #719a49;
background-image: -moz-linear-gradient(top,#719a49,#4d6a31);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#719a49),to(#4d6a31));
background-image: -webkit-linear-gradient(top,#719a49,#4d6a31);
background-image: -o-linear-gradient(top,#719a49,#4d6a31);
background-image: -ms-linear-gradient(top,#719a49,#4d6a31);
background-image: linear-gradient(to bottom,#719a49,#4d6a31);
background-repeat: repeat-x;
border: 1px solid #344a1e;
-ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff719a49',endColorstr='#ff4d6a31',GradientType=0);
}

引导样式

.btn {
border-color: #c5c5c5;
border-color: rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.25);
}

.btn-modal-plan {
display: inline-block;
vertical-align:middle;
width: 92px;
height: 27px;
line-height: 27px;
text-align: center;
font-size: 12px;
float: right;
padding: 0;
margin-top: 7px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

任何帮助弄清楚发生了什么以及如何解决它将不胜感激。如果浏览器是 ie10，所有元素的 active, focus and hover 状态都尝试了所有方法，包括将 outline 和 border 样式重置为 transparent 和 none。没有运气。任何帮助将不胜感激。非常感谢。

Answer 1

我有一个play to see if I could recreate this。

突然想到的想法是 Internet Explorer 正在向锚点内的图像添加样式，因此您可以使用...停止此操作

a img {
    border: none;
}

Answer 2

这将解决它。

background-clip: padding-box;

我在我的 .modal-content 引导类中发现了这个，这就是导致问题的原因。

删除此属性，您的所有问题都会消失。