CSS Hack的一些知識

時間 2019-11-18

標籤 css hack 一些知識欄目 CSS 简体版

原文原文鏈接

測試環境：Windows7
主要測試：IE六、IE七、IE八、Fire Fox3.5.6
次要測試：Chrome4.0、Opera10.十、Safari4.0四、360瀏覽器3.1

爲了可以讓多個Hack在同一個例子裏，現對實例頁面作以下要求是：html

一、左右有兩個DIV分別是#menu,#content，字體顏色爲白色。
二、#menu高度500px，#content高度600px。
三、#menu寬度200px，#content寬度是自適應（由於是自適應因此經常使用的加float的方法不能解決3pxBug）。
四、在#content中寫入一段文字且與紅色區域邊距爲50px。

<!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" />ui

<title></title>spa

<style>firefox

body,div{margin:0; padding:0;}xml

div{color:#fff;}htm

#menu{width:200px; height:500px; background:#900; float:left;}blog

#content{height:600px; padding-left:50px; background:#36f;}

</style>

</head>

<body>

<div id="menu"></div>

<div id="content"></div>

</body>

</html>

代碼在各類瀏覽器下進行測試的結果以下：

IE6

IE八、firefox、Opera、Chrome

經過瀏覽器的測試咱們能夠比較出：
一、IE6與IE7效果對比基本一致，但IE6在兩個DIV中間出現了3像素的Bug，這也是很是有名的IE6 3像素Bug。注意：若是對IE6的這兩個經典的Bug不熟悉的話請看這兩篇文章：《3像素Bug》
二、IE8和Fire Fox內，紅色區域（#menu）蓋住了藍色的區域（#content）。

提出問題：
一、解決自適應寬度狀況下的IE6 3像素Bug(注：若是寬度是必定的，只須要加上浮動float便可解決，可是在寬度自適應的狀況下此方法無效)
二、解決位置不一致（例如#content中的文字）

解決方法（利用CSSHack來解決）：

* html

IE6及更低版本的IE並非將Html標籤認定爲是最外層的元素，而是認爲*（其中*並非指通用選擇器）纔是最外層的元素，而HTML被認爲是它的子元素。另外只要第一個元素浮動第二個元素不浮動的話，就會出現3像素bug。
所以既然只有IE6及更低版本「理解」* HTML，那麼它就能夠做爲一種hack來解決瀏覽器之間的不兼容。
修改代碼以下：

<!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>CSS Hack-CSS</title>

<style>

body,div{margin:0; padding:0;}

div{color:#fff;}

* html #menu{margin-right:-3px;}

#menu{width:200px; height:500px; background:#900; float:left;}

#content{height:600px; padding-left:50px; background:#36f;}

</style>

</head>

<body>

<div id="menu"></div>

<div id="content"></div>

</body>

</html>

經過上面各類瀏覽器的截圖比較能夠發現到目前爲止只有IE7及更低版本（以及360瀏覽器）顯示的此頁面纔是咱們想要的效果，然而非IE瀏覽器的#content的padding-left:50px無效果。若是你夠細心可能發現也只有IE7及更低版本（以及360瀏覽器）的藍色區域沒有被紅色區域所覆蓋，所以設置padding-left:50px;都被紅色區域覆蓋了，文字被紅色區域撐開，也能夠說非IE瀏覽器中默認將藍色區域的文字設置爲padding-left:200px;了（由於紅色區域的寬度是200px）。若是咱們在非IE瀏覽器中也要設置內邊距爲50px，那麼就得是250px才能達到咱們想要的效果。可是若是隻是單純的設置padding-left:250px;的話，IE7及更低版本（以及360瀏覽器）就真正的變成了250px了。
有些朋友確定會想到使用_Hack來解決此問題,若是這麼作的話IE7又不兼容了。所以此方法不可行。

<style>
body,div{margin:0; padding:0;}
div{color:#fff;}
* html #menu{margin-right:-3px;}
#menu{width:200px; height:500px; background:#900; float:left;}
#conten{height:600px; padding-left:250px; _padding-left:50px; background:#36f;}
</style>

主要用於區分IE與非IE瀏覽器。(IE均「理解」\9)

雖然\9Hack能夠解決（上面例子）IE7中的#content文字位置的問題，可是到目前爲止全部的IE都可「理解」此Hack。所以IE8設置成250px之後又被設置成了50px，所以此Hack不能完全解決問題。代碼以下：

<style>
body,div{margin:0; padding:0;}
div{color:#fff;}
* html #menu{margin-right:-3px;}
#menu{width:200px; height:500px; background:#900; float:left;}
#conten{height:600px; padding-left:250px; padding-left:50px\9; background:#36f;}
</style>

意思是說全部的IE均設置左內邊距爲50px;

那麼朋友們確定想到了，再設置一個只有IE8才認識的Hack，很遺憾的告訴你若是從正常的思路來理解的話針對IE8的CSSHack沒有。可是咱們能夠反過來想想使用排除法將IE8排除。

IE8 Hack

<style>
body,div{margin:0; padding:0;}
div{color:#fff;}
* html #menu{margin-right:-3px;}
#menu{width:200px; height:500px; background:#900; float:left;}
#conten{height:600px; padding-left:250px; *padding-left:50px; background:#36f;}
</style>
紅色部分便合起來能夠算是IE8的Hack，由於*只有IE7及更低版本才能解析此Hack，所以IE8便會跳過 *padding-left:50px; 不解析此代碼，從而將IE8如下的版本排除。

若是IE六、IE七、IE8的效果均不一致，那麼如何解決呢？

舉例：

假如IE六、IE七、IE8的DIV元素的左外邊距均不一致。能夠做以下設置即可以解決此類問題： div { padding-left:250px; //解析到此處==>全部的IE均設置爲250px *padding-left:50px; //解析到此處==>IE6和IE7設置爲50px _padding-left:30px; //解析到此處==>IE6設置爲30px } 注：順序必定不能錯。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。