日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
IE與Firefox下對(duì)CSS解析的區(qū)別

 你對(duì)IE與Firefox下對(duì)CSS解析的區(qū)別是否了解，這里大家分享一下，相信本文介紹一定會(huì)讓你有所收獲。

成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、開封網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為開封等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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)變化的解決方案

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  div> 
    3.   
  
  
  3.  div> 
    4.   
  
  
  4.  
    5.

當(dāng)Content內(nèi)容多時(shí)，即使parent設(shè)置了高度100%或auto,在不同瀏覽器下還是不能完好的自動(dòng)伸展。解決方案

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  div> 
    3.   
  
  
  3.  div> 
    4.   
  
  
  4.  div> 
    5.   
  
  
  5.  
    6.

在層的最下方產(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ī)的切換圖片：

 
 
 
    
  
  
  
  1. #random{  
    2.   
  
  
  2. BACKGROUND:url(/rotate.php);  
    3.   
  
  
  3. }  
    4.   
  
  
  4.  
    5.

這個(gè)方法很巧妙。

4、關(guān)于div的高度自適應(yīng)

　
　今天朋友讓我?guī)退捻撟咏鉀Q一個(gè)問題，就是div的高度自適應(yīng)，也就是在一個(gè)父級(jí)div中嵌套一左一右兩個(gè)子div，右邊的子div內(nèi)容可無限擴(kuò)展，而可以使得父級(jí)div的高度能被無限拉長(zhǎng)，用一般的布局方法，在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:
===============

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3. test
     
    4.   
  
  
  4. test
     
    5.   
  
  
  5. test
     
    6.   
  
  
  6.  id=”panel”–> 
    7.   
  
  
  7.  div> 
    8.   
  
  
  8.  
    9.   
  
  
    9.    
  
  
    • 預(yù)安裝檢查 li> 
      •   
  
  
    • 閱讀PFC授權(quán)協(xié)議 li> 
      •   
  
  
    • 初始化數(shù)據(jù)庫 li> 
      •   
  
  
    • 完成安裝 li> 
      •   
  
  
    •  ul> 
      •   
  
  
    •  id=”sidebar”–> 
      •   
  
  
    •  div> 
      •   
  
  
    •  id=”container”–> 
      •   
  
  
    •  div> 
      •   
  
  
    •  div> 
      •   
  
  
    •  
      •

 CSS
=================

 
 
 
    
  
  
  
  1. #container_father{  
    2.   
  
  
  2. margin-left:auto;  
    3.   
  
  
  3. margin-right:auto;  
    4.   
  
  
  4. padding:0px;  
    5.   
  
  
  5. width:750px;  
    6.   
  
  
  6. }  
    7.   
  
  
  7.  
    8.   
  
  
  8. #container{  
    9.   
  
  
  9. width:750px;  
    10.   
  
  
  10. border:1pxsolid#cccccc;  
    11.   
  
  
  11. padding:8px;  
    12.   
  
  
  12. margin:0px;  
    13.   
  
  
  13. background-color:#F1F3F5;  
    14.   
  
  
  14. float:left;  
    15.   
  
  
  15. }  
    16.   
  
  
  16.  
    17.

 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)元素的邊界長(zhǎng)度被神秘地翻了一倍！

情況應(yīng)該如何？

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

 
 
 
    
  
  
  
  1. .floatbox{  
    2.   
  
  
  2. float:left;  
    3.   
  
  
  3. width:150px;  
    4.   
  
  
  4. height:150px;  
    5.   
  
  
  5. margin:5px05px100px;  
    6.   
  
  
  6. /*Thislastvalueappliesthe100pxleftmargin*/  
    7.   
  
  
  7. }  
    8.   
  
  
  8.  
    9.

#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ù)。

 
 
 
    
  
  
  
  1. .floatbox{  
    2.   
  
  
  2. float:left;  
    3.   
  
  
  3. width:150px;  
    4.   
  
  
  4. height:150px;  
    5.   
  
  
  5. margin:5px05px100px;  
    6.   
  
  
  6. display:inline;  
    7.   
  
  
  7. }  
    8.   
  
  
  8.  
    9.

Update(20060828)：

6、空

  • 解析問題。

    在FF下空

  • 是不被解析的，也就是說，

  • 標(biāo)簽所帶的css樣式是不被解釋的。但是在IE下空

  • 是一樣會(huì)被解析的。

    例如我定義如下Css:  

     
 
 
      
  
  
  
    1. #sidebarulli{  
      2.   
  
  
    2. 　　list-style-type:none;  
      3.   
  
  
    3. 　　list-style-image:none;  
      4.   
  
  
    4. 　　margin-bottom:15px;  
      5.   
  
  
    5. }  
      6.   
  
  
    6.  
      7.

    而我的sidebar使用了一個(gè)空的

  • 。那么在FF下不被解析，而在IE下會(huì)出現(xiàn)15px的空白。


    當(dāng)前標(biāo)題：IE與Firefox下對(duì)CSS解析的區(qū)別
    URL地址：http://www.dlmjj.cn/article/cdicjhp.html