firefox與IE Css的區別

 1、IE與Firefox下對CSS解析的區別

這是我在使用中的一些經驗，拿出來和大家分享，希望大家繼續

對高度的解析

IE：將根據內容的高度變化，包括未定義高度的圖片內容，即使定義了高度，當內容超過高度時，將使用實際高度

Firefox：沒有定義高度時，如果內容中包括了圖片內容，MF的高度解析是根據印刷標準，這樣就會造成和實際內容高度不符合的情況；當定義了高度，但是內容超過高度時，內容會超出定義的高度，但是地區使用的樣式不會變化，造成樣式錯位。

結論：大家在可以確定內容高度的情況下最好定義高度，如果真的沒有辦法定義高度，最好不用使用邊框樣式，否則樣式肯定會出現混亂！

img對象alt和title的解析

alt：當照片不存在或者load錯誤時的提示；

title：照片的tip說明。

在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在MF中，兩者完全按照標準中的定義使用

結論：大家在定義img對象時，最後將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用

其他的細節差別

當你在寫css的時候，特別是用float: left（或right）排列一竄圖片時，會發現在firefox裡面正常而IE裡面有問題。無論你用margin:0,還是border: 0來約束，都無濟於事。

其實這裡還有另外一個問題，就是IE對於空格的處理，firefox是忽略的而IE對於塊與塊之間的空格是處理的。也就是說一個div結束後要緊接著一個div寫，中間不要有斷行符號或者空格。不然也許會有問題，比如3px的偏差，而且這個原因很難發現。

非常不走運的是我又碰到了這樣的問題，多個img標籤連著，然後定義的float: left，希望這些圖片可以連起來。但是結果在firefox裡面正常而IE裡面顯示的每個img都相隔了3px。我把標籤之間的空格都刪除都沒有作用。

後來的解決方案是在img外面套li，並且對li定義margin: 0，這樣就解決了IE和firefox的顯示偏差。IE對於一些模型的解釋會產生很多錯誤問題，只有多多嘗試才能發現原因。

From: http://www2.uuzone.com/blog/lilan/18832.htm   2005-5-25

2、嵌套DIV:父DIV的高度不能根據子DIV自動變化的解決方案

轉載：Allan.Blog()

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

當Content內容多時，即使parent設定了高度100%或auto,在不同瀏覽器下還是不能完好的自動伸展。 解決方案

<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

在層的最下方產生一個高度為1的空格，可解除這個問題

3、CSS DIV 學習筆記

tag | 10 五月, 2005 23:16

一、基本上每個區塊的div 都要有自己的id，杜絕不同功能的區塊用同一個id/class

二、每個稍大的區塊div 後面都跟一個<!-- /id -->標記開始、結束

三、隱藏文字的又一種方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0

四、巧妙地處理並列的兩列:
1)
右列為P, width=44.5%, float=left
左列為P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid

以上兩種方法關鍵點在於選擇其中一個為float=left

五、隨機的切換圖片：
#random {
BACKGROUND: url(/rotate.php);
}
這個方法很巧妙。

4、關於div的高度自適應

ulean | 09 三月, 2005 09:59

　　今天小尿讓我幫他的頁子解決一個問題，就是div的高度自適應，也就是在一個父級div中嵌套一左一右兩個子div，右邊的子div內容可無限擴充，而可以使得父級div的高度能被無限拉長，用一般的布局方法，在IE中可以正確瀏覽，在Mozilla中父級div的高度就固定在10px左右，無法自適應高度，height:auto也不行，怎麼辦呢。網上參考到一篇資料，要實現自適應高度，div層必須具有float屬性，於是我開始動手實驗，float:left的話，div就跑到頁面最左邊去了，這好辦，我在它的外面再套一層div，把位置定好，那麼裡面的就算float:left也不會被移動位置了。

xhtml:
==========================================================

<div id="container_father">
  <div id="container">
    <div id="panel"> test<br />
     test<br />
     test<br />
      <!-- id="panel" -->
    </div>
    <div id="sidebar">
     <ul>
       <li class="current">預先安裝檢查</li>
       <li>閱讀 PFC 授權協議</li>
       <li>初始化資料庫</li>
       <li>完成安裝</li>
      </ul>
      <!-- id="sidebar" -->
    </div>
    <!-- id="container" -->
  </div>
</div>

CSS
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}

#container {
   width: 750px;
   border: 1px solid #cccccc;
   padding: 8px;
   margin: 0px;
   background-color: #F1F3F5;
   float: left;
}

FRom: http://ulean.zg163.net/

5、  深入標準  ~  The IE Doubled Float-Margin Bug(IE雙倍浮動邊界Bug)

譯文：PorkFat

什麼發生故障？

一段無錯的代碼把一個居左浮動(float:left)的元素放置進一個容器盒(box)，並在浮動元素上使用了左邊界(margin-left)來令它和容器的左邊產生一段距離。看起來相當的簡單，對嗎？但直至它被在IE/Win中瀏覽為止，在瀏覽器中居左浮動元素的邊界長度被神秘地翻了一倍！

情況應該如何？

下面的圖釋展示了一個簡單的div(茶色的盒子)包含著一個居左浮動的div(綠色的盒子)。浮動元素有一個100px的左邊界，使容器盒與它的左邊緣之間產生了一個100px的間隙。到現在為止，一直都還不錯。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

陳舊的IE“雙倍佔據”

原樣的相同代碼被在IE/Win中瀏覽時以些微不同的方式顯示，下面的圖釋展示了IE/Win在布局上所做的。

這為什麼會發生？別問這種傻問題！這就是IE，記得嗎？符合標準只是理想的狀況，不指望實現，這個簡單的事實正驗證了。

重點

這個Bug僅當浮動邊界和浮動元素的方向相同時出現在浮動元素和容器盒的內邊緣之間，在這之後的任意有著相似邊界的浮動元素不會呈現雙倍邊界。只有特定的浮動行的第一個浮動元素會遭遇這個Bug。像居左的情況一樣，雙倍邊界同樣神秘地顯示在居右的相同方式。

最後，修複辦法！

直到現在(04年1月)這個Bug一直被認為是無法修複的，通常用來替代錯誤的邊界的控制方法如：一個不可視浮動元素的左邊距，連同一個內嵌的盒子一起，可視的盒子裝在不可視浮動元素裡；或者提示僅對IE/Win設定邊界的1/2值。這辦法生效了，但是是混亂的而且搞糟了乾淨的原始碼。不過現在全部結束了。

Steve Clason發現了一個修複辦法，描述在他的Guest Demo裡，修複了雙倍邊界和圍繞文字縮排Bug。這是一個經典的IE的Bug修複辦法，使用一個屬性來修複影響不相關屬性的Bug。

現在如何來做？

研究它，簡單地將{display: inline;}設定給浮動元素就是全部所需做的！是的，聽起來太簡單了，不是嗎？不過這是真的，僅僅一個display的"inline"聲明已經能夠勝任了。

熟悉規則的人知道浮動元素自動化佈建為"block"元素，而不管他們之前是什麼。就如Steve從W3C裡指出：

9.5.1 Positioning the float: the 'float' property

"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

right
Same as 'left', but content flows on the left side of the box, starting at the top.

none
The box is not floated. "

這說明浮動元素上的{display: inline;}會被忽略，事實上所有的瀏覽器沒有呈現任何改變，包括IE。但是，它不知何故讓IE停止將浮動元素的邊界翻倍。因而，這個修複辦法可以被直接應用，而沒有任何繁瑣的隱藏方法。如果將來的一款瀏覽器決定對這個修複辦法抱恙，只要把這個修複裝入IE獨用的Tan Hack裡，細節如同IE Three Pixel Text-Jog Demo。

下面是兩個使用了前面相同代碼的生動示範，第一個照常顯示了IE的Bug，下一個對浮動元素使用了"inline"修複。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

IE6.0,ie7.0與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 這句放置在另一句之上，上面已經提過

IE7.0出來了，對CSS的支援又有新問題。瀏覽器多了，網頁相容性更差了，疲於奔命的還是我們 ，為解決IE7.0的相容問題，找來了下面這篇文章：

現在我大部分都是用!important來hack，對於ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！搜尋了一下，找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。

現在寫一個CSS可以這樣：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

那麼在firefox下字型顏色顯示為#333，IE6下字型顏色顯示為#666，IE7下字型顏色顯示為#999，他們都互不干擾。我真希望那個垃圾的IE6快點退休。。。。