IE與Firefox下對CSS解析的區別
你對IE與Firefox下對CSS解析的區別是否了解，這里大家分享一下，相信本文介紹一定會讓你有所收獲。
IE與Firefox下對CSS解析的區別
1、對高度的解析
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對于一些模型的解釋會產生很多錯誤問題，只有多多嘗試才能發現原因。
2、嵌套DIV:父DIV的高度不能根據子DIV自動變化的解決方案
- <dividdivid=”parent”>
- <dividdivid=”content”>div>
- div>
當Content內容多時，即使parent設置了高度100%或auto,在不同瀏覽器下還是不能完好的自動伸展。解決方案
- <dividdivid=”parent”>
- <dividdivid=”content”>div>
- <divstyledivstyle=”font:0px/0pxsans-serif;clear:both;display:block”>div>
- div>
在層的最下方產生一個高度為1的空格，可解除這個問題。#p#
3、CSSDIV學習筆記
一、基本上每個區塊的div都要有自己的id，杜絕不同功能的區塊用同一個id/class
二、每個稍大的區塊div后面都跟一個標記開始、結束
三、隱藏文字的又一種方法TEXT-INDENT:-9999px;LINE-HEIGHT:0
四、巧妙地處理并列的兩列:
1)
右列為P,width=44.5%,float=left
左列為P.first,border-right:#a7a7a71pxsolid,width=45%
2)
右列#right,margin-left:50%
左列#left,float=left,width=50%border-right:#a7a7a71pxsolid
以上兩種方法關鍵點在于選擇其中一個為float=left
五、隨機的切換圖片：
- #random{
- BACKGROUND:url(/rotate.php);
- }
這個方法很巧妙。
4、關于div的高度自適應
今天朋友讓我幫他的頁子解決一個問題，就是div的高度自適應，也就是在一個父級div中嵌套一左一右兩個子div，右邊的子div內容可無限擴展，而可以使得父級div的高度能被無限拉長，用一般的布局方法，在IE中可以正確瀏覽，在Mozilla中父級div的高度就固定在10px左右，無法自適應高度，height:auto也不行，怎么辦呢。網上參考到一篇資料，要實現自適應高度，div層必須具有float屬性，于是我開始動手試驗，float:left的話，div就跑到頁面最左邊去了，這好辦，我在它的外面再套一層div，把位置定好，那么里面的就算float:left也不會被移動位置了。
xhtml:
===============
- <dividdivid=”container_father”>
- <dividdivid=”container”>
- <dividdivid=”panel”>test<br/>
- test<br/>
- test<br/>
- id=”panel”–>
- div>
- <dividdivid=”sidebar”>
- <ul>
- <liclassliclass=”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:1pxsolid#cccccc;
- padding:8px;
- margin:0px;
- background-color:#F1F3F5;
- float:left;
- }
FRom:http://ulean.zg163.net/。#p#
5、深入標準~TheIEDoubledFloat-MarginBug(IE雙倍浮動邊界Bug)
什么發生故障？
一段無錯的代碼把一個居左浮動(float:left)的元素放置進一個容器盒(box)，并在浮動元素上使用了左邊界(margin-left)來令它和容器的左邊產生一段距離。看起來相當的簡單，對嗎？但直至它被在IE/Win中瀏覽為止，在瀏覽器中居左浮動元素的邊界長度被神秘地翻了一倍！
情況應該如何？
下面的圖釋展示了一個簡單的div(茶色的盒子)包含著一個居左浮動的div(綠色的盒子)。浮動元素有一個100px的左邊界，使容器盒與它的左邊緣之間產生了一個100px的間隙。到現在為止，一直都還不錯。
- .floatbox{
- float:left;
- width:150px;
- height:150px;
- margin:5px05px100px;
- /*Thislastvalueappliesthe100pxleftmargin*/
- }
#p#陳舊的IE“雙倍占據”
原樣的相同代碼被在IE/Win中瀏覽時以些微不同的方式顯示，下面的圖釋展示了IE/Win在布局上所做的。
這為什么會發生？別問這種傻問題！這就是IE，記得嗎？符合標準只是理想的狀況，不指望實現，這個簡單的事實正驗證了。
重點
這個Bug僅當浮動邊界和浮動元素的方向相同時出現在浮動元素和容器盒的內邊緣之間，在這之后的任意有著相似邊界的浮動元素不會呈現雙倍邊界。只有特定的浮動行的***個浮動元素會遭遇這個Bug。像居左的情況一樣，雙倍邊界同樣神秘地顯示在居右的相同方式。
***，修復辦法！
直到現在(04年1月)這個Bug一直被認為是無法修復的，通常用來替代錯誤的邊界的控制方法如：一個不可視浮動元素的左邊距，連同一個內嵌的盒子一起，可視的盒子裝在不可視浮動元素里；或者使用技巧僅對IE/Win設定邊界的1/2值。這辦法生效了，但是是混亂的而且搞糟了干凈的源代碼。不過現在全部結束
了。
SteveClason發現了一個修復辦法，描述在他的GuestDemo里，修復了雙倍邊界和圍繞文字縮進Bug。這是一個經典的IE的Bug修復辦法，使用一個屬性來修復影響不相關屬性的Bug。
現在如何來做？
研究它，簡單地將{display:inline;}設置給浮動元素就是全部所需做的！是的，聽起來太簡單了，不是嗎？不過這是真的，僅僅一個display的”inline”聲明已經能夠勝任了。
熟悉規則的人知道浮動元素自動設置為”block”元素，而不管他們之前是什么。就如Steve從W3C里指出：
9.5.1Positioningthefloat:the‘float’property
“Thispropertyspecifieswhetheraboxshouldfloattotheleft,right,ornotatall.Itmaybesetforelementsthatgenerateboxesthatarenotabsolutelypositioned.Thevaluesofthispropertyhavethefollowing
meanings:
left
Theelementgeneratesablockboxthatis
floatedtotheleft.Contentflowsontherightsideofthebox,
startingatthetop(subjecttothe‘clear’property).The‘display’is
ignored,unlessithasthevalue‘none’.
right
Sameas‘left’,butcontentflowsontheleftsideofthebox,startingatthetop.
none
Theboxisnotfloated.“
這說明浮動元素上的{display:
inline;}會被忽略，事實上所有的瀏覽器沒有呈現任何改變，包括IE。但是，它不知何故讓IE停止將浮動元素的邊界翻倍。因而，這個修復辦法可以被直接應用，而沒有任何繁瑣的隱藏方法。如果將來的一款瀏覽器決定對這個修復辦法抱恙，只要把這個修復裝入IE獨用的TanHack里，細節如同IEThreePixelText-JogDemo。
下面是兩個使用了前面相同代碼的生動演示，***個照常顯示了IE的Bug，下一個對浮動元素使用了”inline”修復。
- .floatbox{
- float:left;
- width:150px;
- height:150px;
- margin:5px05px100px;
- display:inline;
- }
Update(20060828)：
6、空解析問題。
在FF下空
是不被解析的，也就是說，例如我定義如下Css:
- #sidebarulli{
- list-style-type:none;
- list-style-image:none;
- margin-bottom:15px;
- }
而我的sidebar使用了一個空的
。那么在FF下不被解析，而在IE下會出現15px的空白。【編輯推薦】
