XHTML+CSS相容性解決方案

XHTML+CSS相容性解決方案小集使用XHTML＋CSS構架好處不少，但也確實存在一些問題，不論是因為使用不熟練還是思路不清晰，我就先把一些我遇到的問題寫在下面，省的大家四處找。

1.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方案：

引用內容：
div{margin:30px!important;margin:28px;}注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：

引用內容：
div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，所以不可以唯寫margin:XXpx!important;

2.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不支援，如果有人理解的話，請告訴我一聲，謝了！：）

3.ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值所以先定義：

引用內容：
ul{margin:0;padding:0;}
就能解決大部分問題。

4.關於指令碼，在xhtml1.1中不支援language屬性，只需要把代碼改為：

引用內容：
<script   type="text/javascript">
就可以了。

5.如果你在BOX容器裡使float和text-align的方向設為一致：

引用內容：
{float:left;text-align:left;margin:0 0 0 200px;}
我們可做如下修改：

引用內容：
{float:left;text-align:left;margin:0 0 0 200px;display:inline;}
superadmin 2007-9-15 00:55
個人整理的FF、IE的最基本的CSS相容技巧結合JavaScript，進行進一步補充、整理。 Updated@2007/3/11

CSS 常見注意事項：
http://www.awflasher.com/blog/archives/638 - 轉載請保留連結，隨時可能修改！
同時相容IE、FF的基本注意事項
1、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;

}[/code]onhavinglayout-絕對不得錯過，每一個製作CSS以及用指令碼操作DOM的人都不得錯過！

2、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*/
}

3、關於容器的包涵關係
很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現問題。
在IE中，外層的寬度會被內層更寬的div擠破。
一定要用Photoshop或者Firework量取像素級的精度。

4、關於高度的問題
如果是動態地新增內容，高度最好不要定義。瀏覽器可以自動調整，然而如果是靜態內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎麼回事）

5、最狠的手段 - !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 */
}

值得注意的是，一定要將
xxxx !important 這句放置在另一句之上，具體原因很簡單，就不說了：）

補充：
當時發表這篇文章時，並沒有IE7的出現，而且那個時候我也沒有很多地考慮JavaScript。這次更新一些。
一、IE6的border。會自動往外加margin。
當第一個box和第二個box之間的margin為a時，如果兩個box都沒有border，那麼IE6、IE7、FF下面都沒問題。
當有border時，FF和IE7的border不會佔用它們之間的“空位”，而IE6這個老喜歡“自作聰明”的傢伙就把margin給撐開了。
我並沒有調試是否padding也會有這個副作用，我個人懷疑也有，但是既然把問題分析道這一步了，就不贅述了。
解決方案就是判斷是否是IE6，然後動態修補margin。其間涉及到js擷取瀏覽器版本、樣式值這些技術。參閱
http://www.awflasher.com/blog/archives/791

二、對於塊元素，在IE6下面最好制定寬度才可float起來，尤其是a標籤。

三、在IE下，如果採用了list-style-position:inside，那麼可能會造成li元素強行往前縮排。
superadmin 2007-9-15 00:56
IE7 beta2的CSS相容性當IE7 beta1推出的時候，我在第一時間對它作了個測試。當時發現它對CSS的支援幾乎沒有任何變化，著實失望了一陣。MS在最近推出了IE7 beta2，這次有了不少新的改進和變化。但這些改進和變化會導致一些原來正常網頁出現布局錯誤或者原來可以使用的Hack技巧不再可用。MSDN在年初的時候把這些可能產生的問題羅列給開發人員（這是原文），這裡我把其中比較主要的問題簡單地描述一下，希望能對大家有所協助。

　　注意，在IE7正版發布之前，以下提到所有內容都是有可能變化的。

盒模型變了！！！
　　這恐怕是會讓那些使用Web標準建設大型網站的開發人員感到背脊發涼的變化，不過不用太擔心，主要的變化是在盒模型對溢出（overflow）內容的處理方法。

　　假設有一個100px寬100px高的盒子，在這個盒子裡放一個200px寬200px高的圖片。目前IE的正理方法是自動把盒子“撐大”到200px見方。而IE7 beta2的處理方法和FF是一致的：盒子不變，溢出的部分在盒子外面被渲染。也就是說盒子的overflow值真正地使用了W3C的預設值“visible”。

　　如果你現有的布局是依賴於IE的“自動撐開”，那麼要小心，很可能會出現問題（特別是動態內容的網頁）。

XML序言（prolog）可能會影響盒模型
　　Oh，My GOD！又是盒模型！

　　大家知道IE有兩種渲染模式：Quirks Mode和Strict Mode。Quirks Mode基本上是非標準的，包括盒模型在內，它的渲染方式與W3C的標準有些出入。而Strick Mode基本上是標準的（反正都不是絕對標準也不是絕對不標準……）。IE6及以前版本會根據寫在XHTML文檔第一行（也只能是第一行）的DocType聲明來選擇渲染模式。如果發現了一個它能識別的DocType，比如XHTML Transitional或者XHTML Strict等等，它就使用Strict Mode來渲染。其他所有情況下都使用Quirks Mode。

　　有些開發人員為了顯式地聲明他們的XHTML文檔是一個XML，會在文檔的第一行（問題就在這裡，它也必須在第一行）加上XML的序言（prolog）。比如：

<?xml version="1.0" encoding="gb2312"?>　　雖然初衷是為了讓文檔更“標準”，但由於IE不認這行字，結果還是按Quirks Mode來渲染。

　　IE7 beta2解決這個問題，它會跳過prolog來看檢查DocType。所以可能會出現IE6及以下版本用Quirks Mode渲染而IE7 beta2用Strict Mode渲染的情況。

　　其實這個問題容易解決，在現有的環境下，把prolog直接刪掉就行了，實在是沒什麼大的用處。當然想裝作在使用XHTML，事實上還是想用Quirks Mode的人可能得好好想個新辦法了^_^

由於改進bug而失效的Hack技巧
* html
這是一個利用IE Bug的Hack，如下的寫法只有IE會解析其中的內容：

* html{...}* html body{...}現在IE beta2將和大部隊一起把它們忽略掉。

底線Hack
這也是一個利用IE Bug的Hack，如下的寫法只有IE會解析其中的內容：

.myclass{
min-height:300px;
_height:300px;
}現在IE beta2將不再解析底線開頭的屬性，但是會把它當作一個“使用者自訂”屬性。自訂屬性並不能應用到表現上，但是它會存在於文檔模型中，可以使用指令碼來訪問。（這個特性我還沒有測試過）

/**/注釋Hack
這是我最喜歡的Hack技巧之一了。如下的寫法在Strict Mode下面會對IE6透明（IE5.x是會解析的），但是現在IE7 beta2將會解析它：

.myclass{
height/**/:300px;
}由於增強功能而失效的Hack技巧
原來IE不支援以下寫法，現在可以了：

child選擇符Hack
html > body{
height:300px;
}相鄰選擇符Hack
head + body{
height:300px;
}相鄰選擇符和first-child偽類選擇符
head:first-child + body{
height:300px;
}這些都算不上什麼壞訊息，反正我從來不用這些Hack^_^

俺的頁面亂咧，咋辦？
　　在MSDN的那篇文章上給出了一些解決方案，從我的角度來看都是些治標不治本、隔靴搔癢的方案。要不用JS來做CSS的工作，要不只針對IE來載入特定的CSS。所以建議大家：等！一等IE7的正式版，在正式版出來之前，什麼都有可能變。二等偉大的CSS社區的牛牛們找出更多的Hack技巧。IE7不可能做得和FF一模一樣，也不可能和IE6一模一樣，反正總會有點不一樣的，就利用那點不一樣的東西來做Hack。

　　雖然用各種Hack是件很無奈的事情，但現實就是這樣，我們在努力影響這個行業的同時只有好好適應它，所以私底下很希望能看到用中國人名字命名的Hack出現。

　　Fight！
superadmin 2007-9-15 00:59
IE與Firefox的CSS相容大全1.DOCTYPE 影響 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;}
　　就能解決大部分問題

　　
注意事項：

　　1、float的div一定要閉合。

　　例如：(其中floatA、floatB的屬性已經設定為float:left;)<#div id=\"floatA\" >
<#div id=\"floatB\" >
<#div id=\"NOTfloatC\" >
　　這裡的NOTfloatC並不希望繼續平移，而是希望往下排。
　　這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標籤，必須將float標籤閉合。
　　在<#div class=\"floatB\">
<#div class=\"NOTfloatC\">
　　之間加上<#div class=\"clear\">
　　這個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;}

　　2、margin加倍的問題。

　　設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。
　　解決方案是在這個div裡面加上display:inline;
例如：
<#div id=\"imfloat\">

　　相應的css為
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}

　　3、關於容器的包涵關係

　　很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。

　　4、關於高度的問題

　　如果是動態地新增內容，高度最好不要定義。瀏覽器可以自動調整，然而如果是靜態內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎麼回事）

　　5、最狠的手段 - !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 */}
　　值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經提過
superadmin 2007-9-15 01:00
CSS相容IE6,IE7,FIREFOX的一些收集第一種，是CSS HACK的方法

height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/

注意順序。

這樣也屬於CSS HACK，不過沒有上面這樣簡潔。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

第二種是使用IE專用的條件注釋
<!--其他瀏覽器 -->
<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if IE 7]>
<!-- 適合於IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<!--[if lte IE 6]>
<!-- 適合於IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

第三種css filter的辦法，以下為經典從國外網站翻譯過來的。.

建立一個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各版本以外的瀏覽器上。

對IE6和FF的相容可以考慮以前的!important

個人比較喜歡用第一種，簡潔，相容性比較好。

Tags: CSS   發布:arcbox | 分類:網頁設計 | 評論:5 | 引用:0 | 瀏覽:1144   5.PeriCHR
http://perichr.cn/
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

這個似乎應該是這麼寫的：

#example { color: #333; } /* Moz */
* #example { color: #666; } /* IE6 */
*+#example { color: #999; } /* IE7 */

也不見得不簡潔……
superadmin 2007-9-15 01:05
IE與FireFox之間CSS的相容問題今日用FireFox開啟BLOG，喲~~ 右邊導航與IE下完全走樣。
想必，這就是兩者間的相容問題了。

其實CSS 'width' 指的是標準CSS中所指的width的寬度，在firefox中的寬度就是這個寬度。它只包含容器中內容的寬度。而Internet Explorer 'width'則是指整個容器的寬度，包括內容，padding ，border。
Firefox中：容器占的寬度=內容寬度+padding寬度+border寬度
IE中：內容寬度=您定義的容器寬度(Internet Explorer 'width')-padding寬度-border寬度

所以，如果IE中定義 width:120px;padding:5px 的話，所顯示的寬度就是120px.
即padding:5px是在width裡面。
而Firefox中，上面這個定義，顯示寬度就是 125 px;
所以，我們就必須這樣定義
width:115px !important;width:120px;padding:5px;
必須注意的是， !important; 一定要在前面。