2019獨角獸企業(yè)重金招聘Python工程師標準>>>

CSS

IE10~11 透明滾動條

透明滾動條不占空間，顯示時會覆蓋內(nèi)容

//--如下樣式使?jié)L動條變?yōu)槠胀邮?body {/* ... */-ms-overflow-style: scrollbar; }

IE10~11 輸入框多個叉號

點擊叉號會清空輸入框內(nèi)容，會覆蓋自己定制樣式，可能不會富客戶端框架的一些事件 input::-ms-clear { display: none; }

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

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

IE8 png圖片有黑色邊框

PNG的支持問題在于IE7及以上版本使用了filter來支持PNG的Alpha通道，
所以對于PNG來說其實已經(jīng)偷偷被應用了一個 filter了。
雖然解決了主要的PNG透明問題，不過也伴隨著另一個副作用，就是不能再應用其他filter。
或者準確地說是應用其他filter會破 壞IE對PNG的支持。這就是為什么PNG在漸隱和漸現(xiàn)的時候會有難看的黑邊。

IE8 不支持background-size屬性

如果必須做背景拉伸，可以添加一個100%的div，并添加一個img圖片，設置div的z-index為負數(shù)

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設為負數(shù)

<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 會將一個注釋或者文字節(jié)點當成first-child，而不是只有元素才是“子”元素。所以，如果在第一個子元素前有注釋或文字，IE7會匹配之而不是去匹配第一個子元素。

轉載于:https://my.oschina.net/sandant/blog/698569

總結

以上是生活随笔為你收集整理的Css 浏览器兼容性及其其他常见问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。