利用IE6對!important的解釋差異做Hack

技術小胖子發表於2017-11-15
原文網址 : https://flycode.co/archives/131297
Import
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 
<title>important</title> 
<style type=”text/css”> 

p 

{ 

color:red !important;/*現代瀏覽器*/ 

color:blue;/*ie6為藍色*/ 

} 
</style> 
</head> 

<body> 

  <p>段落文字<p> 
</body> 
</html>
 
在這裡color屬性先後重複定義，注意!important的位置。
 
在IE6中結果
段落文字
 
FF3：
段落文字
 
看來IE6是認為後面定義的覆蓋前面的嘍，標準瀏覽器會正確對待!important，優先順序最高。
 
這並不代表IE6不認識這個!important
 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 
<title>important</title> 
<style type=”text/css”> 

p 

{ 

color:red !important;/*現代瀏覽器&&IE6*/ 

} 

p 

{ 

color:blue; 

} 
</style> 
</head> 

<body> 

  <p>段落文字<p> 
</body> 
</html>
 
這時候ie6中也是紅色了，認識的IE6的這個差異在我們平時中能免去了不少麻煩。



本文轉自 xcf007 51CTO部落格，原文連結：http://blog.51cto.com/xcf007/102824，如需轉載請自行聯絡原作者


相關文章