【轉】css解決相容的問題

css解決相容的問題

  2007-08-16 21:06    閱讀    評論 字號：

css解決相容的問題
1；float的閉合
在float元素間增加一個標記
<div class=clear></div>
這個樣式定義為：
.clear
{
　clear:both;
}
2：最好的div居中方法
.someStyle
{
　width:xpx;
　margin:xpx auto;
}

3：strong標籤重寫的好處
對於特定的內容，如果要進行強調，又需要設定自己的樣式，可以不必另行定義div，而用strong標籤的重寫。
例如如下的HTML程式碼：
<div id=somePart>
<strong>我是強調的內容</strong>，我是普通的內容
</div>
對應的CSS檔案如下：
#somePart strong
{
font-weight:normal;
color:#f00;
}

4：IE的display:inline;
當box為float時，IE下面會使得margin加倍。真是莫名其妙……IE6頁沒有解決這個問題。
解決方法是float後續標籤閉合（見前），並且給float的box賦以“display:inline;”的屬性，至於這該死的
display:inline是什麼意思，
5：另外一個IE的sbbug
當Windows樣式主題為XP樣式時，所有的按鈕不能定義background-image，只能定義background，也就是說
#regb
{
…
background:url(images/reg/login.gif) no-repeat;
…
}
可以，然而
#regb
{
…
background-image:url(images/reg/login.gif) no-repeat;
…
}
就不行了！
唉！不過加上background-color:transparent;之後就好了！
6：換行打破float的問題
假設佈局
A|B
div B標浮在A的右側，這時候如果不設定B的寬度，則B很可能由於內容過多而撐破大的佈局，跑到A的下面，形成
A
B
的局面。
因此一定要注意設定B的寬度。
7：IE與FF對寬度的理解不同
在IE中，如果子元素寬度超標，會自動“撐破”母元素，而FF不會，所以常用FF除錯的時候，一定要確保子元素width小於母元素。
不管是IE還是FF, border都是跟padding走的。而width則在IE和FF有不同的理解，準確地說，border會跟width+padding走！
8、關於高度的問題
如果是動態地新增內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎麼回事）
9、最狠的手段 – !important;
如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對於!important會自動優先解析,然而IE則會忽略.如下
.tabd1
{
　background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
　background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */
}
10、margin加倍的問題。
設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。
解決方案是在這個div裡面加上display:inline;
例如：
<div id=IamFloat></div>
相應的css為
#IamFloat
{
　float:left;
　margin:5px;/*IE下理解為10px*/
　display:inline;/*IE下再理解為5px*/
}
11、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經設定為float:left;)
<wrapper>
<div id=floatA></div>
<div id=floatB></div>
<div id=NOTfloatC></div>
</wrapper>
這裡的NOTfloatC並不希望繼續平移，而是希望往下排。
這段程式碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標籤，必須將float標籤閉合。
在
<div id=floatB></div>
<div id=NOTfloatC></div>
之間加上<div class=clear></div>
aw提醒您：這個div一定要注意宣告位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在巢狀關係，否則會產生異常。
並且將clear這種樣式定義為為如下即可：
.clear
{
　clear:both;
}
此外，為了讓高度能自動適應，要在wrapper裡面加上overflow:hidden;
當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了相容。
例如我的某一個wrapper如下定義：
.colwrapper
{
　overflow:hidden;
　zoom:1;
　margin:5px auto;
}
onhavinglayout-絕對不得錯過，每一個製作CSS以及用指令碼操作DOM的人都不得錯過！

12：position屬性其實是指本體對上級的定位。
預設的屬性值都是static，靜態。就不用多說了。最關鍵的是
relative（相對）以及absolute（絕對）。
往往我們如果是COPY別人的程式碼，會把absolute屬性與left、top配合起來製作相關的“懸浮層”效果。然而有時候我們需要針對某一個容器的懸浮效果，而不是針對視窗的。這時候通過高度、寬度的計算不但麻煩，而且幾乎無法完美實現效果。我一開始也無能為力，後來發現只要把其上一級的樣式屬性position設定為relative就可以了。
也就是說，position的屬性值的效果，直接受其容器樣式中position屬性值影響。
例如如下A-B的巢狀結構
<div id=A>
<div id=B>
</div>
</div>
當A的position為relative時，B的position為absolute才有效。這時候left:0、top:0就不再針對視窗文件，而是針對id為A的這個div了。

這樣在開發一些基於B/S應用程式的時候，就能很方便的新增一些UI元素，例如某一個活動層的關閉按鈕等。
13：關於list-style失效的問題
列表
無論是列表本身(ol, ul) 還是單個的列表元素(li)，擁有 layout 後都會影響列表的表現。不同版本 IE 的表現又有不同。最明顯的效果就體現在列表符號上(如果你的列表自定義了列表符號則不會受這個問題影響)。這些符號很可能是通過某種內部機制附到列表元素上的(通常是附著在它們外面)。不幸的是，由於是通過“內部機制”新增的，我們無法訪問它們也無法修正它們的錯誤表現。
最明顯的效果有：
列表獲得 layout 後，列表符號會消失或者被放置在不同的或者錯誤的位置。

有時它們又可以通過改變列表元素的邊距而重新出現。這看起來似乎是以下事實導致的結果：layout 元素會試圖裁掉超出其邊界的內部內容。
列表元素獲得 layout 之後，會有和上面一樣的問題出現，更多參考 (extra vertical space between list items)http://www.brunildo.org/test/IEWlispace.php

進一步又有一個問題就是(在有序列表中)任何具有 layout 的列表元素似乎都有自己獨立的計數器。比如我們有一個含五個列表元素的有序列表，只有第三個列表元素有 layout。我們會看到這樣：
1… 2… 1… 4… 5…
此外，如果一個有 layout 的列表元素跨行顯示時，列表符號會底部對齊(而不是按照預料的頂部對齊)。
以上某些問題還是無法解決的，所以如果需要列表符號的時候最好避免讓列表和列表元素獲得 layout。如果需要限定尺寸，最好給別的元素設定尺寸，比如給整個列表外面套一個元素並設定它的寬度，又或者比如給每個列表元素中的內容設定高度等等。
另一個IE中列表的常見問題出現在當某個 li 中的內容是一個 display: block 的錨點(anchor)時。在這種情況下，列表元素之間的空格將不會被忽略而且通常會顯示成額外的一行夾在每個 li 之間。一種避免這種豎直方向多餘空白的解決方法是賦予這些錨點 layout。這樣還有一個好處就是可以讓整個錨點的矩形區域都可以響應滑鼠點選。
解決方案-用js動態寫入li序列… -_-
14：我個人概括的圖片存放規則
一、非語義圖片(就是指那些表現樣式的圖片)存放於styles/images下
二、樣式圖片儘量在CSS中體現，可以用background+text-indent來配合完成，對於非塊元素，用display:block使得text-indent屬性生效
關於strong標籤重寫的好處
對於特定的內容，如果要進行強調，又需要設定自己的樣式，可以不必另行定義div，而用strong標籤的重寫。
例如如下的HTML程式碼：
<div id=somePart>
<strong>我是強調的內容</strong>，我是普通的內容
</div>
對應的CSS檔案如下：
#somePart strong
{
font-weight:normal;
color:#f0R>}
這種方法從語義上來說是非常利於SEO的。

FF和IE的css屬性差別總結
2.FF: div 設定 margin-left, margin-right 為 auto 時已經居中, IE 不行
3.FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
5.FF: 支援 !important, IE 則忽略, 可用 !important 為 FF 特別設定樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上
6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。缺點是要控制內容不要換行
7.cursor: pointer 可以同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 可以
8.FF: 連結加邊框和背景色，需設定 display: block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，所以不可以只寫margin:XXpx!important;
10.IE5 和IE6的BOX解釋不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
關於這個/**/是什麼我也不太明白，只知道IE5和firefox都支援但IE6不支援，如果有人理解的話，請告訴我一聲，謝了！：）
11.ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}
就能解決大部分問題

DIV佈局常見問題
目前遵從標準的瀏覽器無疑就是 Mozilla, Safari 或 Opera。
確保您想要的效果真的存在
許多特定的瀏覽器專有的CSS擴充套件在正式標準中並不存在。 如果您對 filter(濾鏡) 或滾動條指定樣式，您用的就是私有程式碼，除了IE之外，在別的瀏覽器中毫無作用。如果驗證器告訴您程式碼沒有定義，極有可能您用了私有樣式，別指望在不同的瀏覽器中得到一致的效果。

如果佈局中一定要用浮動物件，別忘了適時使用清除（clear）屬性。
浮動元素似易實難，而且難以駕馭。如果您發現浮動物件伸出了容器的邊界，或者不像您所期望的那樣顯示，請檢查您的期望是否正確。關於這個問題請看Eric Meyer 的教程。

邊距的合併：可用padding 或 border 來避免。
您可能被多餘的(或者想要卻不出現的)空白搞得焦頭爛額。如果您用了 margins，邊距的合併可能就是問題的根源。 Andy Budd 對此的解釋也許能為你解惑。

避免將 padding/border 和固定寬度同時應用到同一元素。
IE5 錯誤的區塊模型是罪魁禍首，是它把事情弄得亂七八糟。雖然有補救方案，不過最好是繞過這個問題，當子元素的寬度固定時，為其父元素指定 padding。

避免IE下未指定樣式內容的閃爍。
如果您用 @import 來輸入外部樣式表，早晚會發現IE有“閃爍”的毛病。在應用CSS樣式之前，未格式化的HTML文字會短暫地出現。這是可以避免的。

別指望 min-width 在IE中有用。
IE不支援它，但是它將 width 當作 min-width，所以通過一些 IE 的過濾技巧(filtering)，可以實現同樣的最終效果。

走投無路時，試一試減少寬度
由於舍入誤差，有時 50% 加上 50% 等於 100.1%，破壞某些瀏覽器中的佈局。不妨試試將 50% 減到 49%，甚至 49.9%。

IE 中顯示不正常？
可能是 Peekaboo 臭蟲在作怪，尤其是當滑鼠經過超連結時能顯示正常。修補方法見Position is Everything。

如果使用了錨點，在應用超連結樣式時要特別小心。
如果您在程式碼中使用了傳統的錨點(<a name=”anchor”>，您會注意到 :hover 和 :active 偽類也會作用於它。要避免這種情形，你可以使用 id，或者使用鮮為人知的語法： :link:hover, :link:active

記住“LoVe/HAte”（愛/恨）連結規則
要以下面的順序指定超連結偽類：Link, Visited, Hover, Acitve。任何其他順序都不妥當。假如用了 :focus，次序應為 LVHFA（“Lord Vader`s Handle Formerly Anakin”，Matt Haughey 這樣建議）。

請記住“TRouBLED”（麻煩的）邊框。
邊框(border)、邊距(margin)和補白(padding)的簡寫次序為：順時針方向從上開始，即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。

非零值要指明單位。
在用CSS指定字型、邊距或大小時，必須指明所用的單位（唯一的例外是 line-height，很奇怪，它不需要單位）。某些瀏覽器對未指明單位的處理方法不足為憑。零就是零，不管是 px 還是 em。其他的非零值都要明確指定單位。例如： padding: 0 2px 0 1em;

測試不同的字型大小。
像 Mozilla 和 Opera 這樣的高階瀏覽器都允許你改變字型大小，不管你用什麼字型單位。某些使用者的預設字型大小肯定和你的不同，盡最大努力去滿足他們。

測試時用嵌入式樣式，釋出時再改為外部輸入。
將樣式表嵌入在你的 HTML 原始碼中，在測試時可以消除許多快取引起的錯誤，尤其是某些 Mac 下的瀏覽器。但在釋出前，一定要記住將樣式表移到外部檔案，用 @import 或 引入。

加上明顯的邊框有助於佈局除錯。
像 div {border: solid 1px #f00;} 之類的全域性規則可以暫時為你查出佈局問題。為特定的元素加上邊框可幫您找到難以發覺的重疊或空白問題。

圖片路徑不要用單引號。
當設定背景圖片時，要堅持用雙引號。儘管看起來好像多此一舉，但是如果不這麼做，IE5/Mac 會噎住。

不要為將來的樣式表（比如手持式裝置或列印用樣式表）“佔位子”。
Mac IE5 對空的樣式表比較感冒，會增加頁面的裝入時間。建議樣式表中至少應該有一條規則（哪怕是註釋也好），免得Mac IE噎住。

還有一些建議雖然不針對某些功能，但是在開發過程中值得注意：

好好組織您的CSS檔案
恰當地成塊註釋CSS，將相似的CSS選擇符編為一組，養成一致的命名習慣和空白格式（為跨平臺考慮，建議用空白字元而不是 tab。）以及適當的次序。

以功能（而不是外觀）為類和ID命名
假如您建立了一個 .smallblue 類，後來打算將文字改大，顏色變為紅色，這個類名就不再有任何意義了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。

組合選擇符
保持CSS短小對減少下載時間非常重要。請儘量為選擇符分組、 利用繼承(inheritance)以及使用簡寫(shorthand)來減少冗餘。

使用圖片替換技術時要考慮親和力
已經發現傳統的FIR在螢幕閱讀器，以及關閉圖片顯示[的瀏覽器]中會出問題。對此有其他解決辦法，要根據具體情況，慎重使用。

1,盒直譯器的不同解釋.
#box{   width:600px;        //for   ie6.0-   width:500px;       //for ff+ie6.0}#box{    width:600px!important            //for ff    width:600px;        //for ff+ie6.0    width /**/:500px;       //for   ie6.0-}
2,在ie中隱藏css,使用子選擇器
html>body #box{     }
3,只有ie識別
*html #box{     }
4,在ie/win有效而ie/max隱藏,使用反斜槓
/* */
#box{ }
5,給ie單獨定義樣式 這裡更加詳細的說明
6,浮動ie產生的雙倍距離
#box{   float:left;   width:100px;   margin:0 0 0 100px; //這種情況之下IE會產生200px的距離   display:inline;   //使浮動忽略}
這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素);
#box{   display:block; //可以為內嵌元素模擬為塊元素   display:inline; //實現同一行排列的的效果   diplay:table;   //for ff,模擬table的效果}
7,for oprea only
@media all and (min-width:0px){/* opera */#box{ }}
8,IE與寬度和高度的問題
IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，
正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。
比如要設定背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：
#box{    width: 80px;    height: 35px;}html>body #box{    width: auto;    height: auto;    min-width: 80px;    min-height: 35px;}
9,頁面的最小寬度
min-width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標籤下，然後為div指定一個類：
然後CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文件不太正規。它實際上通過Javascript的判斷來實現最小寬度。
同樣的辦法也可以為IE實現最大寬度：
#container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 1200? ”1200px“ : ”auto”;}
10,清除浮動
.hackbox{       display:table; //將物件作為塊元素級的表格顯示}或者.hackbox{        clear:both;}
或者加入:after（偽物件）,設定在物件後發生的內容，通常和content配合使用，IE不支援此偽物件，非Ie 瀏覽器支援，所以並不影響到IE/WIN瀏覽器。——-這種的最麻煩的……
#box:after{    content: “.”;     display: block;    height: 0;     clear: both;     visibility: hidden;}
11,DIV浮動IE文字產生3象素的bug
左邊物件浮動，右邊採用外補丁的左邊距來定位，右邊物件內的文字會離左邊有3px的間距.
#box{    float:left;    width:800px;}#left{    float:left;    width:50%;}#right{    width:50%;}*html #left{    margin-right:-3px;   //這句是關鍵}
   HTML程式碼<div id=”box”>    <div id=”left”></div>   <div id=”right”></div></div>
12,屬性選擇器(這個不能算是相容,是隱藏css的一個bug)

p[id]{}div[id]{}
這個對於IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用
屬性選擇器和子選擇器還是有區別的,子選擇器的範圍從形式來說縮小了,屬性選擇器的範圍比較大,如p[id]中,所有p標籤中有id的都是同樣式的.
簡單的沒有浮動的頁面
假設你有兩個div——div#one和div#two，它們都有固定的寬度。如果沒有浮動或者絕對的定位，這些div就會以一個摞在另一個之上的形式放在瀏覽器視窗的左側（如例A所示），因為標準的頁面安排順序是從左到右，從上到下，塊級元素（block-level element）都會在前一個元素下面緊接著開始一個新的行。
下面是所有例子都需要的一段HTML：
<body>
<div id=”one”>
    Port side text…
</div>
<div id=”two”>
    Second column text…
</div>
</body>
下面的CSS程式碼用於基本的、不帶浮動的版本：
div#one {
    width: 150px;
    margin: 0px;
    background-color: red;
}
div#two {
    width: 300px;
    padding: 0px 10px 5px 10px;
    margin: 0px;
    background-color: silver;
}
基本的浮動
當你建立一個包含有float: left或者float: right屬性的CSS樣式，並把它應用到諸如div標籤這樣的塊級元素上的時候，div就會從文件的普通文字安排順序裡被刪除，並被強制放到包含元素（containing element）的左側或者右側。如果包含元素是一個主體標籤，那麼div就會浮動到瀏覽器視窗的一側。否則，浮動的div就會移動到包含div的邊緣，而以前是不會這樣的。
如果你有一個以上的浮動元素，那麼第二個和隨後的浮動元素會緊接著第一個排成一條，其排列方式非常像文字里的一行字母。一系列浮動元素會對齊成一行，直到撐滿瀏覽器視窗的整個寬度，然後換到下一行，就像段落裡的文字那樣排列。
固定寬度的浮動
只要div#one和div#two具有固定寬度，而且其總寬度小於瀏覽器視窗的寬度，它們就會像例B所示的那樣緊挨著排在一起。幾個大的瀏覽器在處理固定寬度浮動的方式上保持著相當的一致性。下面的CSS程式碼所生成的頁面在IE6、Netscape 7、Mozilla 1和Opera 7裡顯示出來是一模一樣的。
div#one {
    float: left;
    width: 150px;
    margin: 0px;
    background-color: red;
}
div#two {
    float: left;
    width: 300px;
    padding: 0px 10px 5px 10px;
    margin: 0px;
    background-color: silver;
}
可變寬度的浮動帶來了可變的結果
當你想把div變成寬度可變的時候，生成浮動效果不一致的問題就浮現出來了。例如，假設你想要在頁面的左側放一個固定寬度欄，用於導航按鈕的列表，而想在右側放另外一個欄，讓它根據瀏覽器視窗（的大小）自由擴充套件和收縮。
你可能會認為自己用兩個左側浮動的div就能實現這個效果；一個是固定寬度的，而另一個把寬度設定為自動，讓div自動調整大小，這樣它就能夠填補第一個div和瀏覽器視窗右側之間的空白。例C就是下面程式碼顯示的結果：
div#one {
    float: left;
    width: 150px;
    margin: 0px;
    background-color: red;
}
div#two {
    float: left;
    width: auto;
    padding: 0px 10px 5px 10px;
    margin: 0px;
    background-color: silver;
}
如果在IE裡顯示這個例子，你會獲得預計的效果，即左邊是固定寬度的欄，緊挨著它右側的是一個可變寬度的欄；但是，相同的程式碼在其他當前流行的瀏覽器上卻會生成不同的結果。第二個div會掉到第一個的下面，而不是接著這一行放在右邊。結果就和不帶浮動的頁面非常類似。
解決方案
要獲得這種兩欄佈局，其中一欄能夠自動調整大小的理想效果的一種解決方案是對第一欄使用浮動div，但是要從必須調整大小的那一欄裡把浮動刪掉。由於浮動欄和普通的文件安排順序是分離的，所以常規的div會被放在上方，但是在浮動div的下方。在左邊新增一個padding，並讓其等於浮動div的寬度，而常規div的內容看起來就會像是放在左邊div右側的一個欄裡。例D說明了這個技巧。下面的程式碼能夠在當前所有的瀏覽器裡生成相同的效果。
div#one {
    float: left;
    width: 150px;
    margin: 0px;
    background-color: red;
}
div#two {
    width: auto;
    padding: 0px 10px 5px 160px;
    margin: 0px;
    background-color: silver;
}
儘管當前Netscape／Mozilla瀏覽器一般都被認為要比IE更加符合標準，但是我個人認為IE生成浮動元素的效果要比前兩個瀏覽器更加一致。但是如果不考慮哪一個生成的效果是“正確的”，那麼其差別就會給Web建造者帶來最頭疼的問題。要避免你的頁面設計出現問題，知道瀏覽器生成的效果會有所不同是第一步，也是最重要的一步。

div定位的一些問題
在一個DIV下並排的兩個DIV的寬度超過父DIV寬度的時候其中一個子DIV就會就會跑到下一行，不會自動覆蓋。
在一個不知道具體頁面寬度的時候總希望能自適應寬度和高度，在經過嘗試，發現其實很簡單，可能是一直沒有注意到，其中一個子DIV不應該使用相對定位，使用絕對定位就可以進行覆蓋。舉例如下：
<DIV style=”position:absolute;background-color:blue;width:100px;height:50px;clear:none;left:0;top:0;”>
<DIV style=”z-index:1;position:absolute;float:left;background-color:red;width:50px;height:40px;left:0;bottom:0;”></DIV>
<DIV style=”-index:3;position:relative;float:right;background-color:yellow;width:70px;height:50px;”></DIV>
</DIV>

!important在ie7.0的hack方法
由於ie對!important識別存在bug,而現在大部分網頁標準設計師又通過這個bug來相容ie和ff,但是ie7.0把這個bug給修復了,所以問題又出現了,怎麼相容ie.7.0的同時又能相容ie6.0和ff?正所謂”上有政策,下有對策”,國外的網頁標準設計師通過使用css filter的辦法(並不是css hack)來相容ie7.0,ie6.0和ff,以下為我從國外網站的翻譯.
新建一個css樣式如下：
#item {
    width: 200px;
    height: 200px;
    background: red;
}
新建一個div,並使用前面定義的css的樣式：
<div id=”item”>some text here</div>
在body表現這裡加入lang屬性,中文為zh：
<body lang=”en”>
現在對div元素再定義一個樣式：
*:lang(en) #item{
    background:green !important;
}
這樣做是為了用!important覆蓋原來的css樣式,由於:lang選擇器ie7.0並不支援,所以對這句話不會有任何作用,於是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支援此屬性,所以需要加入以下css樣式：
#item:empty {
    background: green !important
}
:empty選擇器為css3的規範,儘管safari並不支援此規範,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上,並在以下瀏覽器和作業系統下通過測試：
按照遠作者的說法其實這不能算是一種hack,應該屬於filter,不過這似乎並不是最重要的,因為通過這個辦法,我們又一次瞭解決IE6.0,IE7.0和其他瀏覽器之間的相容性問題,而且使用:lang-filter這辦法,在今後的一段時間內都會有用