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