Css 瀏覽器兼容性及其其餘常見問題

CSS

IE10~11 透明滾動條

透明滾動條不佔空間，顯示時會覆蓋內容

//--以下樣式使滾動條變爲普通樣式
body {
   /* ... */
    -ms-overflow-style: scrollbar;
}

IE10~11 輸入框多個叉號

點擊叉號會清空輸入框內容，會覆蓋本身定製樣式，可能不會富客戶端框架的一些事件 input::-ms-clear { display: none; }

IE8 背景透明時沒法響應事件

IE8如下的瀏覽器bug，背景透明的元素沒法點擊(實際點擊的是其底層的元素)
對須要透明的div添加背景圖片，圖片爲透明的png

IE8 png圖片有黑色邊框

PNG的支持問題在於IE7及以上版本使用了filter來支持PNG的Alpha通道，
因此對於PNG來講其實已經偷偷被應用了一個 filter了。
雖然解決了主要的PNG透明問題，不過也伴隨着另外一個反作用，就是不能再應用其餘filter。
或者準確地說是應用其餘filter會破 壞IE對PNG的支持。這就是爲何PNG在漸隱和漸現的時候會有難看的黑邊。

IE8 不支持background-size屬性

若是必須作背景拉伸，能夠添加一個100%的div，並添加一個img圖片，設置div的z-index爲負數

IE8下A標籤的文字沒法響應拖動事件

IE8不支持A標籤意外的標籤的:hover僞類

若是使用了，可能但不必定致使渲染問題

IE6~IE7 float:right換行

將須要浮動的元素放到不浮動的元素前定義

IE7 下div設置了margin-left，直接子元素input添加margin-left空隙爲兩個的和

div設置了margin-left，直接子元素input 使用margin-left時會有間隙會是兩個的和， 解決方案爲在input外包一層span

<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    .contant{
        background-color: gray;
        width: 100%;
        height: 200px;
        margin-left: 100px;
    }
    .contant input{
        margin-left: 100px;
    }
</style>

<div class="contant">
    <input type="text" />
</div>

div沒法覆蓋Object引入的瀏覽器插件(視頻/weboffice等)

能夠在須要覆蓋插件的彈出層中添加一個iframe，iframe大小爲此div的帶下，z-index設爲負數

<div class='msg_mask'><iframe src=\"javascript:''\" style=\"position: absolute; visibility: inherit; border: 0px; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe></div>

css的disabled選擇器

input:disabled IE8-不支持
input[disabled] IE6-不支持，可是IE7~IE8支持
IE9及如下disabled選擇器沒法改變字體顏色。

:first-child IE7問題

IE7 會將一個註釋或者文字節點當成first-child，而不是隻有元素纔是「子」元素。因此，若是在第一個子元素前有註釋或文字，IE7會匹配之而不是去匹配第一個子元素。