最近整理了一下特別簡(jiǎn)單的div+css的不同瀏覽器的兼容性的問(wèn)題，跟大家分享一下，只適合剛?cè)腴T的新手，歡迎大牛們給提出意見(jiàn)。 1. 默認(rèn)的內(nèi)外邊距不同 問(wèn)題： 各個(gè)瀏覽器默認(rèn)的內(nèi)外邊距不同 解決： *{margin:0;padding:0;} 2. 水平居中的問(wèn)題 問(wèn)題： 設(shè)置 text-align: center ?? ie6-7文本居中，嵌套的塊元素也會(huì)居中 ff /opera /safari /ie8文本會(huì)居中，嵌套塊不會(huì)居中 解決： 塊元素設(shè)置? 1、margin-left:auto;margin-right:auto 2、margin:0 auto; 3. 垂直居中的問(wèn)題 問(wèn)題： 在瀏覽器中 想要垂直居中，設(shè)置vertical-align:middle; 不起作用。例如：ie6下文本與文本輸入框?qū)Σ积R，需設(shè)置vertical-align:middle，但是文本框的內(nèi)容不會(huì)垂直居中 解決： 給容器設(shè)置一個(gè)與其高度相同的行高 line-height:與容器的height一樣 4. 關(guān)于高度問(wèn)題 問(wèn)題： 如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。 如果設(shè)定了高度，內(nèi)容過(guò)多時(shí)，ie6下會(huì)自動(dòng)增加高度、其他瀏覽器會(huì)超出邊框 解決： 1.設(shè)置overflow:hidden; 2.高度自增height:auto!important;height:100px; ? 5. IE6 默認(rèn)的div高度 問(wèn)題： ie6默認(rèn)div高度為一個(gè)字體顯示的高度，所在ie6下div的高度大于等于一個(gè)字的高度，因此在ie6下定義高度為1px的容器，顯示的是一個(gè)字體的高度 解決： 為這個(gè)容器設(shè)置下列屬性之一 1、設(shè)置overflow:hidden; 2、設(shè)置line-height:1px; 3、設(shè)置zoom:0.08 6. IE6 最小高度(寬度)的問(wèn)題 問(wèn)題： ie6不支持min-height、min-width屬性，默認(rèn)height是最小高度，width是最小寬度。 解決： 使用ie6不支持但其余瀏覽器支持的屬性!important。 設(shè)置屬性min-height:200px; height:auto !important; height:200px; ? 7. td高度的問(wèn)題 問(wèn)題： table中td的寬度都不包含border的寬度，但是oprea和ff中td的高度包含了border的高度 解決： 設(shè)置line-height和height一樣。在ie中如果td中的沒(méi)有內(nèi)容，那么border將不會(huì)顯示 8. div嵌套p時(shí)，出現(xiàn)空白行 問(wèn)題： div中顯示文本，ff、oprea、Chrome：top和bottom都會(huì)出現(xiàn)空白行，但是在ie下不會(huì)出現(xiàn)空白行。 解決： 設(shè)置p的margin:0px，再設(shè)置div的padding-top和padding-bottom 9. IE6-7圖片下面有空隙的問(wèn)題 問(wèn)題： 塊元素中含有圖片時(shí)，ie6-7中會(huì)出現(xiàn)圖片下有空隙 解決： ? 1、在源代碼中讓和在同一行 2、將圖片轉(zhuǎn)換為塊級(jí)對(duì)象display:block; 3、設(shè)置圖片的垂直對(duì)齊方式 ?vertical-align:top/middle/bottom 4、改變父對(duì)象的屬性，如果父對(duì)象的寬、高固定，圖片大小隨父對(duì)象而定，那么可以對(duì)父元素設(shè)置： overflow:hidden;? 5、設(shè)置圖片的浮動(dòng)屬性 ?float:left; 10. IE6雙倍邊距的問(wèn)題 問(wèn)題： ie6中設(shè)置浮動(dòng)，同時(shí)又設(shè)置margin時(shí)，會(huì)出現(xiàn)雙倍邊距的問(wèn)題 例float:left;width:100px;margin:0 100px;? 解決： 設(shè)置display:inline; 11. IE6 weidth為奇數(shù)，右邊多出1px的問(wèn)題 問(wèn)題： 父級(jí)元素采用相對(duì)定位，且寬度設(shè)置為奇數(shù)時(shí)，子元素采用絕對(duì)定位，在ie6中會(huì)出現(xiàn)右側(cè)多出1像素? 解決： 將寬度的奇數(shù)值改成偶數(shù) 12. IE6兩個(gè)層之間3px的問(wèn)題 問(wèn)題： 左邊層采用浮動(dòng)，右邊沒(méi)有采用浮動(dòng)，這時(shí)在ie6中兩層之間就會(huì)產(chǎn)生3像素的間距 解決： 1、右邊層也采用浮動(dòng) ?float 2、左邊層添加屬性 ?margin-right:-3px; 13. IE6 子元素絕對(duì)定位的問(wèn)題 問(wèn)題： 父級(jí)元素使用padding后，子元素使用絕對(duì)定位，不能精確定位 解決： 在子元素中設(shè)置 ?_left:-20px; _top:-1px; 14. 顯示手型cursor:hand 問(wèn)題： ie6/7/8、opera ? ? ? 都支持 ?但是safari 、 ff 不支持 解決： 寫(xiě)成 cursor:pointer; ?(所有瀏覽器都能識(shí)別) ?? 15. IE6-7 line-height失效的問(wèn)題 問(wèn)題： 在ie中img與文字放一起時(shí)， line-height不起作用 ? 解決： 都設(shè)置成float 16. td自動(dòng)換行的問(wèn)題 問(wèn)題： Table寬度固定，td自動(dòng)換行 解決： 設(shè)置Table的table-layout:fixed，td的word-wrap:break-word 17. 子容器浮動(dòng)后，父容器擴(kuò)展問(wèn)題 問(wèn)題： 子容器都float以后，父容器沒(méi)有設(shè)定高度,父容器將不會(huì)擴(kuò)展 解決： 只需要添加一個(gè)clear:both的div，代碼如下：

? ? ? ? ? ?<div?style="border:1px?solid?#333;width:204px">?

? ? ? ? ? ?<div?style="width:100px;border:1px?solid?#333;?float:left;?">子容器a<div>?

? ? ? ? ? ?<div?style="width:100px;border:1px?solid?#333;?float:left;">子容器b<div>?

? ? ? ? ? ?<div?style="clear:both"><div>?

? ? ? ? ? ?<div>?

18. 透明png圖片會(huì)帶背景色 問(wèn)題： 在ie6下透明的png圖片會(huì)帶一個(gè)背景色 解決： background-image: url(icon_home.png);/* 其他瀏覽器 */ background-repeat: no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */ _background-image: none; /* IE6 */ 19. list-style-position默認(rèn)值的問(wèn)題 問(wèn)題： ie下list-style-position默認(rèn)為inside, ? firefox默認(rèn)為outside 解決： css中指定為outside即可解決兼容性問(wèn)題 20. list-style-image準(zhǔn)確定位的問(wèn)題 問(wèn)題： li前設(shè)置圖片時(shí)，圖片與其后的文字對(duì)齊問(wèn)題 解決： 1、采用背景定位 和 字符縮進(jìn)的方法 background:url() no-repeat left center; text-index:16px; 2、采用相對(duì)定位方法 li 設(shè)置list-style:url(); li的子元素position:relative;top:-5px;

?

轉(zhuǎn)載于:https://www.cnblogs.com/ant-killer/p/6144825.html

總結(jié)

以上是生活随笔為你收集整理的新入门的小白，整理一下特别简单实用的div+css兼容性的问题。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。