各種瀏覽器安全色問題列表

來源:互聯網
上載者:User
下面列出了各種瀏覽器安全色性問題,寫css的時候可以參考。

1、僅IE7與IE5.0可以識別
*+html select {…}
當面臨需要只針對IE7與IE5.0做樣式的時候就可以採用這個HACK。
2、僅IE7可以識別
*+html select {…!important;}
當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。
3、IE6及IE6以下識別
* html select {…}
這個地方要特別注意很多部落格都寫成了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
4、html/**/ >body select {…}
這句與上一句的作用相同。
5、僅IE6不識別,屏蔽IE6
select { display /*屏蔽IE6*/:none;}
這裡主要是通過CSS注釋分開一個屬性與值,注釋在冒號前。
6、僅IE6與IE5不識別,屏蔽IE6與IE5
select/**/ { display /*IE6,IE5不識別*/:none;}
這裡與上面一句不同的是在選擇符與花括弧之間多了一個CSS注釋。不屏蔽IE5.5
7、僅IE5不識別,屏蔽IE5
select/*IE5不識別*/ {…}
這一句是在上一句中去掉了屬性區的注釋。只有IE5不識別,IE5.5可以識別。
8、盒模型解決方案
selct {width:IE5.x寬度; voice-family :”\”}\”"; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。
9、只有Opera識別
@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。
以上都是寫CSS中的一些HACK,這些都是用來解決局部的相容性問題,如果希望把相容性的內容也分離出來,不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器匯入特別的樣式,也有的是寫在HTML中的通過條件來連結或是匯入需要的補丁樣式。
1. 區別FF和IE

1-1
首先,當然是!important大法,可以提升指定樣式規則的應用優先權,如下面的例子:
插入代碼:
div{
background-color: red !important;
background-color: blue;
}
因為!important聲明在IE6中並不是絕對的,它會被之後的同名屬性定義所替換。也就是說在上面的例子中,IE6所應用的是最後一個背景色的值,即“blue”;而在FF中背景色的值為“red”。

1-2
還有一種方法,就是IE瀏覽器可以識別“>”等一些符號,如“~”、“`”、“<”等,都只有IE可以識別,但是不合理,!important是符合標準的。所以
插入代碼:
div{
background-color: red;
>background-color: blue;
}
在FF中得到的是背景色紅色,而在IE中得到的背景色是藍色,根據樣式重定義的規則,如果瀏覽器可以識別“>”,則應該得到的藍色的背景,因此可以知道“>”只有IE可以識別。

這樣,我們就可以把FF和IE的樣式分離開。下面就是解決IE自己的問題了。

2. 區別IE5.5和IE的其他版本

看一個例子:
插入代碼:
div{
>background-color: black;
>background-color /*IE5.5*/: green;
}
這個例子使用了“>”,只有IE可以識別,在IE6中得到了黑色的背景;而在IE5.5中得到的綠色的背景;在IE5中也得到了黑色的背景。這就說明了第二句定義只有IE5.5能識別,這是個很早就公布的HACK,可以在網上找到相關的資料,要注意的就是在屬性名稱之後是有一個空格的。

到此我們已經把FF、IE5.5、IE6分離出來了,那IE5呢?其實現在我們只要把IE5跟IE6分開就OK了。

3. 區別IE5與IE5.5+
插入代碼:
div{
>background-color: red;
}
div/*IE5.5+*/{
>background-color: black;
}
這裡我們又用到一個HACK,就是“div/**/{}”,這個定義在IE5以上的版本才能識別出來。這個例子得到的結果是,在IE5中的背景色為紅色;在IE5以上版本中得到的是黑色背景。

4. 完整的Hack
這樣我們就可以為不同的瀏覽器定義不同的樣式了。來看個完整的例子:
插入代碼:
div{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
div/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
需要注意的是,在上面例子中“background-color”定義的順利不能改變,即FF-IE5-IE6-IE5.5。對於IE的定義在屬性前要加“>”,因為“div/**/{}”這個HACK在FF中可以識別。

 



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。