標籤：
<div style="width:735px; height:405px;">
<div class="mainFloat"></div>
</div>
樣式：
.mainFloat {
width:725px;
height:395px;
border:#78a5c2 solid 5px;
padding:0;
overflow-y:hidden;
overflow-x:hidden;
}
這些樣式在Firefox，Google，IE6-IE9都很正常，唯獨在IE10下.mainFloat這個div出現了很難看的捲軸，發現該div的父級的寬和高在IE10下是725px和395px,也就是比其他的瀏覽器少了10px，我想著這是個IE10hack.
以下是我的解決方案：
.mainFloat {
width:725px;
height:395px;
border:#78a5c2 solid 5px;
padding:0;
overflow-y:hidden;
overflow-x:hidden;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.mainFloat { width:715px; height:385px; }
}
從上面這個hack中，我學到兩個解決IE10下hack的方法，特跟大家分享。
方法一：@media -ms-high-contrast
IE10支援媒體查詢，然後也支援-ms-high-contrast這個屬性，所以，我們可以用它來hack ie10：
在CSS中直接寫明就可以，如以上例子：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.mainFloat { width:715px; height:385px; }
}
方法二：特性檢測：@cc_on
我們可以用IE私人的條件編譯(conditional compilation)結合條件注釋來提供針對ie10的Hack：該指令碼裡面的IE排除條件注釋，以確保IE6-9不承認它，然後它功能檢測到了名為@ cc_on。在這裡：
<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS Bin</title></head><body><!--[if !IE]><!--<script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]--></body></html>
請注意/*@cc_on ! @*/中間的這個驚嘆號。
這樣就可以在ie10中給html元素添加一個class=”ie10″，然後針對ie10的樣式可以寫在這個選取器下：
.ie10 .mainFloat{/* IE10-only styles go here */width:715px;height:385px;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
