IE與Firefox下對CSS解析的區(qū)別
你對IE與Firefox下對CSS解析的區(qū)別是否了解，這里大家分享一下，相信本文介紹一定會讓你有所收獲。
IE與Firefox下對CSS解析的區(qū)別
1、對高度的解析
IE：將根據(jù)內(nèi)容的高度變化，包括未定義高度的圖片內(nèi)容，即使定義了高度，當(dāng)內(nèi)容超過高度時，將使用實際高度。
Firefox：沒有定義高度時，如果內(nèi)容中包括了圖片內(nèi)容，MF的高度解析是根據(jù)印刷標(biāo)準(zhǔn)，這樣就會造成和實際內(nèi)容高度不符合的情況；當(dāng)定義了高度,但是內(nèi)容超過高度時，內(nèi)容會超出定義的高度，但是區(qū)域使用的樣式不會變化，造成樣式錯位。
結(jié)論：大家在可以確定內(nèi)容高度的情況下***定義高度，如果真的沒有辦法定義高度，***不用使用邊框樣式，否則樣式肯定會出現(xiàn)混亂！
◆img對象alt和title的解析
alt：當(dāng)照片不存在或者load錯誤時的提示；
title：照片的tip說明。
在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在MF中，兩者完全按照標(biāo)準(zhǔn)中的定義使用
結(jié)論：大家在定義img對象時，***將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用
◆其他的細(xì)節(jié)差別
當(dāng)你在寫css的時候，特別是用float:left（或right）排列一竄圖片時，會發(fā)現(xiàn)在firefox里面正常而IE里面有問題。無論你用margin:0,還是border:0來約束，都無濟(jì)于事。
其實這里還有另外一個問題，就是IE對于空格的處理，firefox是忽略的而IE對于塊與塊之間的空格是處理的。也就是說一個div結(jié)束后要緊接著一個div寫，中間不要有回車或者空格。不然也許會有問題，比如3px的偏差，而且這個原因很難發(fā)現(xiàn)。
非常不走運(yùn)的是我又碰到了這樣的問題，多個img標(biāo)簽連著，然后定義的float:left，希望這些圖片可以連起來。但是結(jié)果在firefox里面正常而IE里面顯示的每個img都相隔了3px。我把標(biāo)簽之間的空格都刪除都沒有作用。
后來的解決方法是在img外面套li，并且對li定義margin:0，這樣就解決了IE和firefox的顯示偏差。IE對于一些模型的解釋會產(chǎn)生很多錯誤問題，只有多多嘗試才能發(fā)現(xiàn)原因。
2、嵌套DIV:父DIV的高度不能根據(jù)子DIV自動變化的解決方案
- <dividdivid=”parent”>
- <dividdivid=”content”>div>
- div>
當(dāng)Content內(nèi)容多時，即使parent設(shè)置了高度100%或auto,在不同瀏覽器下還是不能完好的自動伸展。解決方案
- <dividdivid=”parent”>
- <dividdivid=”content”>div>
- <divstyledivstyle=”font:0px/0pxsans-serif;clear:both;display:block”>div>
- div>
在層的最下方產(chǎn)生一個高度為1的空格，可解除這個問題。#p#
3、CSSDIV學(xué)習(xí)筆記
一、基本上每個區(qū)塊的div都要有自己的id，杜絕不同功能的區(qū)塊用同一個id/class
二、每個稍大的區(qū)塊div后面都跟一個標(biāo)記開始、結(jié)束
三、隱藏文字的又一種方法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
以上兩種方法關(guān)鍵點(diǎn)在于選擇其中一個為float=left
五、隨機(jī)的切換圖片：
- #random{
- BACKGROUND:url(/rotate.php);
- }
這個方法很巧妙。
4、關(guān)于div的高度自適應(yīng)
今天朋友讓我?guī)退捻撟咏鉀Q一個問題，就是div的高度自適應(yīng)，也就是在一個父級div中嵌套一左一右兩個子div，右邊的子div內(nèi)容可無限擴(kuò)展，而可以使得父級div的高度能被無限拉長，用一般的布局方法，在IE中可以正確瀏覽，在Mozilla中父級div的高度就固定在10px左右，無法自適應(yīng)高度，height:auto也不行，怎么辦呢。網(wǎng)上參考到一篇資料，要實現(xiàn)自適應(yīng)高度，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”>預(yù)安裝檢查li>
- <li>閱讀PFC授權(quán)協(xié)議li>
- <li>初始化數(shù)據(jù)庫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、深入標(biāo)準(zhǔn)~TheIEDoubledFloat-MarginBug(IE雙倍浮動邊界Bug)
什么發(fā)生故障？
一段無錯的代碼把一個居左浮動(float:left)的元素放置進(jìn)一個容器盒(box)，并在浮動元素上使用了左邊界(margin-left)來令它和容器的左邊產(chǎn)生一段距離?？雌饋硐喈?dāng)?shù)暮唵?，對嗎？但直至它被在IE/Win中瀏覽為止，在瀏覽器中居左浮動元素的邊界長度被神秘地翻了一倍！
情況應(yīng)該如何？
下面的圖釋展示了一個簡單的div(茶色的盒子)包含著一個居左浮動的div(綠色的盒子)。浮動元素有一個100px的左邊界，使容器盒與它的左邊緣之間產(chǎn)生了一個100px的間隙。到現(xiàn)在為止，一直都還不錯。
- .floatbox{
- float:left;
- width:150px;
- height:150px;
- margin:5px05px100px;
- /*Thislastvalueappliesthe100pxleftmargin*/
- }
#p#陳舊的IE“雙倍占據(jù)”
原樣的相同代碼被在IE/Win中瀏覽時以些微不同的方式顯示，下面的圖釋展示了IE/Win在布局上所做的。
這為什么會發(fā)生？別問這種傻問題！這就是IE，記得嗎？符合標(biāo)準(zhǔn)只是理想的狀況，不指望實現(xiàn)，這個簡單的事實正驗證了。
重點(diǎn)
這個Bug僅當(dāng)浮動邊界和浮動元素的方向相同時出現(xiàn)在浮動元素和容器盒的內(nèi)邊緣之間，在這之后的任意有著相似邊界的浮動元素不會呈現(xiàn)雙倍邊界。只有特定的浮動行的***個浮動元素會遭遇這個Bug。像居左的情況一樣，雙倍邊界同樣神秘地顯示在居右的相同方式。
***，修復(fù)辦法！
直到現(xiàn)在(04年1月)這個Bug一直被認(rèn)為是無法修復(fù)的，通常用來替代錯誤的邊界的控制方法如：一個不可視浮動元素的左邊距，連同一個內(nèi)嵌的盒子一起，可視的盒子裝在不可視浮動元素里；或者使用技巧僅對IE/Win設(shè)定邊界的1/2值。這辦法生效了，但是是混亂的而且搞糟了干凈的源代碼。不過現(xiàn)在全部結(jié)束
了。
SteveClason發(fā)現(xiàn)了一個修復(fù)辦法，描述在他的GuestDemo里，修復(fù)了雙倍邊界和圍繞文字縮進(jìn)Bug。這是一個經(jīng)典的IE的Bug修復(fù)辦法，使用一個屬性來修復(fù)影響不相關(guān)屬性的Bug。
現(xiàn)在如何來做？
研究它，簡單地將{display:inline;}設(shè)置給浮動元素就是全部所需做的！是的，聽起來太簡單了，不是嗎？不過這是真的，僅僅一個display的”inline”聲明已經(jīng)能夠勝任了。
熟悉規(guī)則的人知道浮動元素自動設(shè)置為”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;}會被忽略，事實上所有的瀏覽器沒有呈現(xiàn)任何改變，包括IE。但是，它不知何故讓IE停止將浮動元素的邊界翻倍。因而，這個修復(fù)辦法可以被直接應(yīng)用，而沒有任何繁瑣的隱藏方法。如果將來的一款瀏覽器決定對這個修復(fù)辦法抱恙，只要把這個修復(fù)裝入IE獨(dú)用的TanHack里，細(xì)節(jié)如同IEThreePixelText-JogDemo。
下面是兩個使用了前面相同代碼的生動演示，***個照常顯示了IE的Bug，下一個對浮動元素使用了”inline”修復(fù)。
- .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下會出現(xiàn)15px的空白。【編輯推薦】
