div+css在不同瀏覽器的兼容問(wèn)題

div+css在不同瀏覽器的兼容問(wèn)題

ID:38033382

大?。?7.50 KB

頁(yè)數(shù):6頁(yè)

時(shí)間:2019-05-24

div+css在不同瀏覽器的兼容問(wèn)題_第1頁(yè)
div+css在不同瀏覽器的兼容問(wèn)題_第2頁(yè)
div+css在不同瀏覽器的兼容問(wèn)題_第3頁(yè)
div+css在不同瀏覽器的兼容問(wèn)題_第4頁(yè)
div+css在不同瀏覽器的兼容問(wèn)題_第5頁(yè)
資源描述:

《div+css在不同瀏覽器的兼容問(wèn)題》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、div+css在不同瀏覽器的兼容問(wèn)題(2009-03-1508:53:54)轉(zhuǎn)載標(biāo)簽:htmldivcss網(wǎng)頁(yè)制作網(wǎng)頁(yè)編程it分類:網(wǎng)站推廣每次做網(wǎng)頁(yè)的時(shí)候用div+css設(shè)計(jì)時(shí)總會(huì)出現(xiàn)瀏覽器兼容的問(wèn)題,明明在ie6里面顯示的好好的在火狐里面有會(huì)有些亂掉,特別討厭,所以在這邊就把常會(huì)出現(xiàn)的問(wèn)題整合出來(lái),供大家也供自己平時(shí)方便查看,里面的都是我經(jīng)常做網(wǎng)頁(yè)的時(shí)候會(huì)碰到的,但是那些解決的辦法卻不是我想出來(lái)的,但是我驗(yàn)證了,那些都是真理哦!應(yīng)該還有很多是我沒(méi)注意到的,所以在看的如果有懂的就幫我補(bǔ)充一下吧DIV+CSS開(kāi)發(fā)瀏覽器的兼容性1.文字本身的大小不

2、兼容。同樣是font-size:14px的宋體文字,在不同瀏覽器下占的空間是不一樣的,ie下實(shí)際占高16px,下留白3px,ff下實(shí)際占高17px,上留白1px,下留白3px,opera下就更不一樣了。解決方案:給文字設(shè)定line-height。確保所有文字都有默認(rèn)的line-height值。這點(diǎn)很重要,在高度上我們不能容忍1px的差異。2.ff下容器高度限定,即容器定義了height之后,容器邊框的外形就確定了,不會(huì)被內(nèi)容撐大,而ie下是會(huì)被內(nèi)容撐大,高度限定失效。所以不要輕易給容器定義height。3.橫向上的撐破容器問(wèn)題,。如果float容

3、器未定義寬度,ff下內(nèi)容會(huì)盡可能撐開(kāi)容器寬度,ie下則會(huì)優(yōu)先考慮內(nèi)容折行。故,內(nèi)容可能撐破的浮動(dòng)容器需要定義width。小實(shí)驗(yàn):有興趣大家可以看看這段實(shí)驗(yàn)。在不同瀏覽器下分別測(cè)試以下各項(xiàng)代碼。a.

b.
c.
d.

4、ed;overflow:hidden”>

上面的代碼在不同瀏覽器中是不一樣的,實(shí)驗(yàn)起源于對(duì)小height值div的運(yùn)用,,小height值要配合overflow:hidden一起使用。實(shí)驗(yàn)好玩而已,想說(shuō)明的是,瀏覽器對(duì)容器的邊界解釋是大不相同的,容器內(nèi)容的影響結(jié)果各不相同。4.最被痛恨的,double-marginbug。ie6下給浮動(dòng)容器定義margin-left或者margin-right實(shí)際效果是數(shù)值的2倍。解決方案,給浮動(dòng)容器定義disp

5、lay:inline。5.mirrormarginbug,當(dāng)外層元素內(nèi)有float元素時(shí),外層元素如定義margin-top:14px,將自動(dòng)生成margin-bottom:14px。padding也會(huì)出現(xiàn)類似問(wèn)題,都是ie6下的特產(chǎn),該類bug出現(xiàn)的情況較為復(fù)雜,遠(yuǎn)不只這一種出現(xiàn)條件,還沒(méi)系統(tǒng)整理。解決方案:外層元素設(shè)定border或設(shè)定float。引申:ff和ie下對(duì)容器的margin-bottom,padding-bottom的解釋有時(shí)不一致,似乎與之相關(guān)。6.吞吃現(xiàn)象。還是ie6,上下兩個(gè)div,上面的div設(shè)置背景,卻發(fā)現(xiàn)下面沒(méi)有設(shè)置背

6、景的div也有了背景,這就是吞吃現(xiàn)象。對(duì)應(yīng)上面的背景吞吃現(xiàn)象,還有滾動(dòng)下邊框缺失的現(xiàn)象。解決方案:使用zoom:1。這個(gè)zoom好象是專門為解決ie6bug而生的。7.注釋也能產(chǎn)生bug~~~“多出來(lái)的一只豬?!边@是前人總結(jié)這個(gè)bug使用的文案,ie6的這個(gè)bug下,大家會(huì)在頁(yè)面看到豬字出現(xiàn)兩遍,重復(fù)的內(nèi)容量因注釋的多少而變。解決方案:用“picRotatestart”方法寫(xiě)注釋。8.img下的留白,大家看這段代碼有啥問(wèn)題:

把div的bo

7、rder打開(kāi),你發(fā)現(xiàn)圖片底部不是緊貼著容器底部的,是img后面的空白字符造成,要消除必須這樣寫(xiě)

后面兩個(gè)標(biāo)簽要緊挨著。ie7下這個(gè)bug依然存在。解決方案:給img設(shè)定display:block。9.失去line-height。文字,很遺憾,在ie6下單行文字line-height效果消失了。。。,原因是這個(gè)inline-block元素和inline元素寫(xiě)在一起了。解決方案:讓img和文字都

8、float起來(lái)。引申:大家知道img的align有text-top,middle,absmiddle啊什么的,你可以嘗試去調(diào)整img和文

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫(huà)的文件,查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常,文件下載后無(wú)此問(wèn)題,請(qǐng)放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。