5
如果任何人都可以幫助，這將是超級。我在IE10/Win8上出現奇怪的渲染問題。在所有其他瀏覽器（包括IE10/Win7）中，一切正常，但IE10/Win8在選中或懸停時會在所有元素上顯示奇怪的輪廓或框陰影。IE10/Windows 8奇怪的輪廓和所有元素的盒子陰影效果
我試過設置所有元素(*)到outline:none或outline:transparent*:active, *:focus, *:hover無濟於事。我也禁用了轉場，但效果仍然出現。我正在使用Twitter Bootstrap和其他自定義樣式。儘管如此，所有的轉換都通過Bootstrap進行。
IE10不支持條件語句，所以我運行以下腳本將ie10類添加到html並添加特定於IE10的樣式。
$(document).ready(function(){
if(($.browser.msie) && ($.browser.version == "10.0")){
$('html').addClass('ie10');
}
});
仍然無法使用。我附上了我正面臨的問題的屏幕截圖（僅限IE10/Win 8）。
這裏的文本框一些示例代碼：
HTML
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);
}
任何搞清楚是怎麼回事，如何解決這個問題將非常感謝幫助。已經嘗試了一切，包括將outline和border樣式重置爲transparent和none，如果瀏覽器爲ie10，則爲active, focus and hover表示所有元素的狀態。沒有運氣。任何幫助將不勝感激。非常感謝。
請張貼相關的CSS代碼 –
屏幕截圖非常有用 - 但在HTML和CSS中最簡單的例子可以證明問題會更加突出。 – Fenton
您是否使用IE開發人員工具（選擇了違規元素）追蹤樣式？ –