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

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

熱門標(biāo)簽:荒野大鏢客2地圖標(biāo)注怎么變中文 蘇州通信外呼系統(tǒng)多少錢 移動400辦理電話 山西旅游景地圖標(biāo)注 武漢人工外呼系統(tǒng) 沈陽智能外呼系統(tǒng)排名 中國地圖標(biāo)注各省份 上古卷軸5地圖標(biāo)注mod 北川縣地圖標(biāo)注
CSS對瀏覽器器的兼容性具有很高的價(jià)值,通常情況下IE和Firefox存在很大的解析差異,這里介紹一下兼容要點(diǎn)。
對高度的解析
IE:將根據(jù)內(nèi)容的高度變化,包括未定義高度的圖片內(nèi)容,即使定義了高度,當(dāng)內(nèi)容超過高度時(shí),將使用實(shí)際高度
Firefox:沒有定義高度時(shí),如果內(nèi)容中包括了圖片內(nèi)容,MF的高度解析是根據(jù)印刷標(biāo)準(zhǔn),這樣就會造成和實(shí)際內(nèi)容高度不符合的情況;當(dāng)定義了高度,但是內(nèi)容超過高度時(shí),內(nèi)容會超出定義的高度,但是區(qū)域使用的樣式不會變化,造成樣式錯(cuò)位。 
結(jié)論:大家在可以確定內(nèi)容高度的情況下最好定義高度,如果真的沒有辦法定義高度,最好不用使用邊框樣式,否則樣式肯定會出現(xiàn)混亂!

img對象alt和title的解析
alt:當(dāng)照片不存在或者load錯(cuò)誤時(shí)的提示;
title:照片的tip說明。
在IE中如果沒有定義title,alt也可以作為img的tip使用,但是在MF中,兩者完全按照標(biāo)準(zhǔn)中的定義使用

結(jié)論:大家在定義img對象時(shí),最后將alt和title對象都寫全,保證在各種瀏覽器中都能正常使用

其他的細(xì)節(jié)差別
當(dāng)你在寫css的時(shí)候,特別是用float: left(或right)排列一竄圖片時(shí),會發(fā)現(xiàn)在firefox里面正常而IE里面有問題。無論你用margin:0,還是border: 0來約束,都無濟(jì)于事。

其實(shí)這里還有另外一個(gè)問題,就是IE對于空格的處理,firefox是忽略的而IE對于塊與塊之間的空格是處理的。也就是說一個(gè)div結(jié)束后要緊接著一個(gè)div寫,中間不要有回車或者空格。不然也許會有問題,比如3px的偏差,而且這個(gè)原因很難發(fā)現(xiàn)。

非常不走運(yùn)的是我又碰到了這樣的問題,多個(gè)img標(biāo)簽連著,然后定義的float: left,希望這些圖片可以連起來。但是結(jié)果在firefox里面正常而IE里面顯示的每個(gè)img都相隔了3px。我把標(biāo)簽之間的空格都刪除都沒有作用。

后來的解決方法是在img外面套li,并且對li定義margin: 0,這樣就解決了IE和firefox的顯示偏差。IE對于一些模型的解釋會產(chǎn)生很多錯(cuò)誤問題,只有多多嘗試才能發(fā)現(xiàn)原因。

2、嵌套DIV:父DIV的高度不能根據(jù)子DIV自動變化的解決方案
div id="parent">
div id="content"> /div>
/div>

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

div id="parent">
div id="content">/div>
div style="font: 0px/0px sans-serif;clear: both;display: block"> /div>
/div>

在層的最下方產(chǎn)生一個(gè)高度為1的空格,可解除這個(gè)問題

3、CSS DIV 學(xué)習(xí)筆記
一、基本上每個(gè)區(qū)塊的div 都要有自己的id,杜絕不同功能的區(qū)塊用同一個(gè)id/class

二、每個(gè)稍大的區(qū)塊div 后面都跟一個(gè)!-- /id -->標(biāo)記開始、結(jié)束

三、隱藏文字的又一種方法 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

以上兩種方法關(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è)父級div中嵌套一左一右兩個(gè)子div,右邊的子div內(nèi)容可無限擴(kuò)展,而可以使得父級div的高度能被無限拉長,用一般的布局方法,在IE中可以正確瀏覽,在Mozilla中父級div的高度就固定在10px左右,無法自適應(yīng)高度,height:auto也不行,怎么辦呢。網(wǎng)上參考到一篇資料,要實(shí)現(xiàn)自適應(yīng)高度,div層必須具有float屬性,于是我開始動手試驗(yàn),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">預(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: 1px solid #cccccc;
   padding: 8px;
   margin: 0px;
   background-color: #F1F3F5;
   float: left;
}

FRom: http://ulean.zg163.net/
12下一頁閱讀全文

標(biāo)簽:喀什 濱州 邯鄲 海東 南充 遼源 東莞 陽泉

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《IE和FIREFOX下CSS的區(qū)別與解決方法第1/2頁》,本文關(guān)鍵詞  和,FIREFOX,下,CSS,的,區(qū)別,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《IE和FIREFOX下CSS的區(qū)別與解決方法第1/2頁》相關(guān)的同類信息!
  • 本頁收集關(guān)于IE和FIREFOX下CSS的區(qū)別與解決方法第1/2頁的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章