精品乱码一卡2卡三卡4卡二卡,99精品在线免费,日韩精品一区二区三区在线

主頁 > 知識庫 > IE和FIREFOX下CSS的區別與解決方法第1/2頁

IE和FIREFOX下CSS的區別與解決方法第1/2頁

CSS對瀏覽器器的兼容性具有很高的價值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點。
對高度的解析
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自動變化的解決方案
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 學習筆記
一、基本上每個區塊的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的高度自適應
　　今天小尿讓我幫他的頁子解決一個問題，就是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"> testbr />
     testbr />
     testbr />
      !-- 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/

12下一頁閱讀全文

標簽：喀什濱州邯鄲海東南充遼源東莞陽泉

巨人網絡通訊聲明：本文標題《IE和FIREFOX下CSS的區別與解決方法第1/2頁》，本文關鍵詞和,FIREFOX,下,CSS,的,區別,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。