div+css常見瀏覽器兼容問題以及解決辦法

時間 2019-12-13

標籤 div+css div css 常見瀏覽器兼容問題以及解決辦法欄目 HTML 简体版

原文原文鏈接

1.圖片下方出現幾像素的空白間隙
問題說明：這個問題在ie6和ff（火狐）下常常見到,例如 <div><img
src=""/></div>這個圖片下面會有一條空白間隙，
解決方法：給圖上一個垂直方向的屬性如:vertical-align:
top(任意一個就行middle);這個問題從而延伸到，object(視頻)和textarea在火狐下也會出現相似的問題，解決方法同樣。細心的朋友會發如今第二節ahuing的重置代碼裏就有這樣一個全局定義object,textarea,img{vertical-align:
top;}

2.IE6雙倍margin的BUG(雙邊距)
問題說明：這是ie6一個著名的bug，當一個元素向一邊浮動時，其它同一個方向若是有margin的話，ie6就會產生雙倍的margin。例如：<div
style="float: left;margin-left:
10px;"></div>在ie6下顯示會有margin-left:20px的距離
解決方法：加個_display:inline:屬性，例如<div
style="float: left;margin-left: 10px;_display:
inline;"></div>

3.ie6下的浮動元素和非浮動元素間出現3像素BUG
問題說明：這也是ie6一個著名的bug,當一個元素浮動時，同級別的文字沒有浮動，在ie6下它們之間就會產生3個像素的bug。例如：<div><img
style="float: left;"
src=""/>摘要摘要摘要摘要</div>,圖片和文字就會出現3像素
解決方法：方法一，兩個元素都浮動，如：<div><img
style="float: left;" src=""/><span style="float:
left;">摘要摘要摘要摘要</span></div>;方法二，這種設計時通常圖片和文字要有間隙的，作個ie6的hack就行,如：<div><img
style="float: left;" src=""/><span style="margin-right: 5px;
_margin-right:
2px;">摘要摘要摘要摘要</span></div>

4.li在IE中底部空行
問題說明：當li裏面有兩個以上的浮動元素時，li的下面就會產生一條空白間隙，例如

<ul
class="tlist">
    <li><span style="float:
left;">欄目</span><a style="float: left;" href="#"
target="_blank">標題標題標題</a></li>
</ul>
解決方法：這個問題和第一個問題很類似，解決方法也是同樣，在li上加個垂直方向的屬性，例如：
<ul
class="tlist">
    <li style="vertical-align: top;"><span
style="float: left;">欄目</span><a style="float: left;" href="#"
target="_blank">標題標題標題</a></li>
</ul>

5.IE6樣式中文註釋後引起失效

問題說明：這是ie6
出現的奇怪現象。這是因爲css 和html 的編碼不一樣所引致,知足下面條件就會引發註釋下面的樣式不起做用：
1). css有中文註釋
2).
css爲ANSI編碼
3). html爲utf-8編碼

解決方法：
1).
去掉中文註釋，用英文註釋或者多打幾個「*」，這是ahuing在以前的教程裏提到的，例如： /*** 註釋 ***/
2). 統一css 和 html
的編碼

建議採用第二種解決方法。ps： css爲uft-8 html 爲ANSI
貌似不會出現失效的狀況。

6.IE6出現重複字符(文字溢出)

問題說明：一個容器包含2兩個具備「float」樣式的子容器，第二個容器的寬度大於父容器的寬度，或者父容器寬度減去第二個容器寬度的值小於3，在第二個容器前存在註釋（這也是爲何此bug也叫作「IE6註釋bug」的緣由）。例以下列代碼：

<!DOCTYPE
html PUBLIC "-//W3C//liD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/liD/xhtml1-transitional.lid">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gbk"
/>
<title>標題</title>
<style>
*{margin:
0;padding: 0;font-size: 12px;}
.a{width:205px;}
.b{float: left;width:
50px; background: black;color: #fff;margin-right: 5px;overflow:
hidden;}
.c{float: left;width: 150px;background:
red;}
</style>
</head>
<body>
<div
class="a">
    <div
class="b">測試測試測試測試測試測試測試111111111111</div>
    
    <div
class="c">測試測試測試測試測試測試測試2222222222</div>
</div>
</body>
</html>

解決方法：
爲什麼會出現重複文字，誰也沒說清楚，包括官方，這個問題，ahuing只在給朋友調試樣式時見過，本身寫的代碼沒見過，因此認識這個bug有點晚，ahuing我的認爲，ie6將註釋也當成內容存在。
如何消滅重複文字，只要讓上面任何一個條件不知足便可，

改變結構，不出現【一個容器包含2兩個具備「float」樣式的子容器】的結構。

1).減少第二個容器的寬度，使父容器寬度減去第二個容器寬度的值大於3。
2).去掉全部的註釋。
3).在第二個容器後面加一個或者多個<div
style="clear"></div>來解決。
4).給溢出文字的標籤加position: relative;屬性

6.png圖片在IE6下出現透明或背景變灰的bug;

問題說明：這裏的png圖片是指32位和24位的，8位的png圖片透明ie6是支持的。

解決方法：
1)使用濾鏡，語法以下
.image-style
{ background-image:
none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png",
sizingMethod="scale");
}
注意：使用濾鏡須要損耗性能。

2)給IE6單獨製做一張.gif圖片(或者8位的png圖片)，打上hack
.image-style{
background:transparent url("filename.png") no-repeat scroll 0
0;_background-image:url("filename.gif");
}
這種方法只須要在切圖時多存儲一份.gif格式的圖片，通常採用這種方法。

7.讓position:absolute彈出層在flash上面

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockw
ave/cabs/flash/swflash.cab#version=6,0,29,0"
width="300" height="190">
<param name="movie" value="flash.swf"
/>
<param name="quality" value="high" />
<param name="wmode"
value="transparent" />
<embed src="flash.swf"wmode="transparent"
quality="high" pluginspage="http://www.macromedia.com/go/getflashp
layer"
type="application/x-shockwave-flash" width="300"
height="190"></embed>
</object>

很少說了，直接複製代碼，而後將兩個flash.swf改成本身的就好了（主要是此代碼<param
name="wmode" value="transparent"
/>）

8.position:absolute定位在IE6下存在left和bottom相對最外層視窗（body）定位的bug:

問題說明：因爲在IE6下，相對定位的元素沒有得到IE內部的haslayout屬性，所以不建立新的定位上下文，因此絕對定位的元素相對於視口進行定位。

解決方法：
1)設置_height：1%；//小的高度不會對實際高度形成影響;例如：<div
style="position: relative;_height: 1%;">內容內容內容內容內容內容內容<div
style="position: absolute;left: 10px;top:
10px;"></div></div>
2)相對定位的祖先元素設置太高度和寬度。
3)相對定位的祖先元素設置_zoom:1,用於觸發元素的layout屬性。

9.position:absolute定位在IE6下z-index失效的bug:

問題說明：在ie6下給浮動層設置z-index失效，例如：正常區塊1會在區塊2之上，可是IE6不行
<div
style="position: relative;"><div style="position: absolute;z-index:
10;">區塊1</div></div>
<div style="position:
relative"><div style="position: absolute;z-index:
5;">區塊2</div></div>
解決方法：ie6只識別父層的z-index，因此咱們能夠給父層也加一個z-index
<div
style="position: relative;z-index: 10;"><div style="position:
absolute;z-index: 10;">區塊1</div></div>
<div
style="position: relative"><div style="position: absolute;z-index:
5;">區塊2</div></div>
另一個解決方法就是後面標籤的z-index老是比它前面的z-index高，有些狀況下能夠將二者的前臺順序調換

10.仍是position,IE6下對position：fixed不支持的bug

問題說明：position：fixed主要用於像客服同樣的浮動層，可是ie6卻不支持，問題的緣由是IE6下的fixed元素絕對定位位置是針對html元素的，而滾動條則是針對body元素的

解決方法：
用絕對定位模擬一個
body{background-image:("xx.gif");}/*一張不存在的圖片，就是徹底透明的*/
.fixed{_postion:absolute;expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight))}//底部
expression(eval(document.documentElement.scrollTop));/*頭部*/
expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop-80));/*右側*/

11.再來個position問題，ie6讓絕對定位的層在select的上面

問題說明：絕對定位的層在ie6下無論對其的z-index給多大的值它始終在select控件的下面

解決方法：
1)經過js控制select的顯示和隱藏(有彈出層時隱藏select)，不過當div只是遮住select的一半時，整個都會隱藏，不適合一些狀況。

2)用iframe遮蓋select，iframe的z-index要比select高,讓彈出層和iframe重合。
<div
style="position: absolute;"></div>
<iframe scrolling="no"
frameborder="0" style="width:100px; height:100px; top:320px; left:60px;
position:absolute;
z-index:-1;"></iframe>

12.哈哈，最後一個position問題，ie6下position:absolute不顯示

問題說明：例如：下面的代碼，a1絕對定位，a2，a3浮動，注意樣式當盒子box的寬度-（a2+a3）<3時，a1就會不顯示，能夠直接複製代碼保存後預覽，這種狀況的機率很小，但它出現時，會讓你摸不着方向
<style>
*{margin:
0;padding: 0;font-size: 12px;}
.box{position: relative;background:
black;color: #fff;height: 50px;width: 100px;}
.a1{position:
absolute;background: red;left: 0;top:30px;}
.a2{float: left;background:
purple;width: 48px;height: 40px;}
.a3{float: left;background: gray;width:
50px;height: 40px;}
</style>
<div class="box">
<div
class="a1">區塊1</div>
<div
class="a2">區塊2</div>
<div
class="a3">區塊3</div>
</div>
解決方法：
1)在絕對定位的層和浮動層之間加一個清除浮動的代碼，例如：<div
style="clear: both;height: 0;overflow: hidden;font-size: 0;line-height:
0;"></div>
2)能夠把絕對定位的層放在全部浮動層的最後面，再在絕對定位的層上加個清除浮動，如：.a1{position:
absolute;background: red;left:
0;top:30px;clear:both;}

13.a連接點擊的難看外框的方法：

IE6下在標籤裏設置hideFocus=true,其餘瀏覽器對a設置：outline:none
例如：
<a
href="###" hideFocus="true"
title=".."/>
a{outline:none}

14.IE6不支持min-height/max-height/min-width/max-width的bug

問題說明：無

解決方法：根據IE6的特性模擬出來

height:auto!important;
min-height:
x px;/*須要的最小高度*/
height: x
px

15.ie6邊框出現斷線的bug
問題說明：當邊框內的元素有激動時，沒有清除浮動，滑動滾動條會出現斷線的問題。例如
<style>
.box{border:
1px solid #ccc;}
.plist li{float: left;}
</style>
<div
class="box">
<ul class="plist">
    <li><a href="#"
target="_blank"><img width="" height=""
src="pic/s.png"/></a></li>
    <li><a href="#"
target="_blank"><img width="" height=""
src="pic/s.png"/></a></li>
    <li><a href="#"
target="_blank"><img width="" height=""
src="pic/s.png"/></a></li>
</ul>
</div>
解決方法：緣由是box沒有haslayout
1)加個屬性_height:1%或者_zoom:1,這是ahuing經常使用字的方法
2)清除浮動也能夠,在ul下加<div
style="height: 0;overflow: hidden;clear:
both;"></div>
3）給box加個背景顏色也行

16.
IE6中僞類:hover的使用及BUG

問題說明：ie6是不支持除a標籤之外的:hover的，例如：<style>.test:hover{background:
red;width:50px;height: 50px;}</style><div
class="test"></div>
解決方法：
1）將a標籤display:black,例如：<style>.test{display:
block;} .test:hover div{background: red;width:50px;height:
50px;}</style><a class="test"
href="###"><div></div></a>;不過這樣作貌似不符合標準
2）用js或者jq解決

17.原來IE6是能夠支持!important的

.demo
{ color:#F00!important; color:#000;
}/*IE6顯示錯誤理解：.demo顯示爲黑色*/
/*而下面IE6是正確理解的：.demo顯示爲紅色*/
.demo {
color:#F00!important;}
.demo { color:#000;
}

18.ie下空格的大小和ff不同

問題說明：有時咱們在佈局時須要用到空格來對齊文本，例如：密  碼和用戶名，這樣寫才能夠對齊，而在ie上面未必是這樣的
解決方法：將字體設置爲宋體，即：font-family:
simsun;

19.容器中連續的英文或者數字，不自動換行

問題說明：<div style="width:
50px;">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
解決方法：<div
style="width: 50px; word-wrap:
break-word;">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
20.ie6
div高度沒法小於10像素解決方法

用CSS 的定義一個DIV的高度時，在IE 7瀏覽器下能夠正常顯示。可是在IE 6 中，height
在10px如下就沒法定義了。這點跟表格有點相似。解決的方法以下：
法一：定義overflow屬性。好比想定義一個高度爲2px
的線條。
<div
style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>

法二：將div
的字體大小屬性fontsize 設置爲跟高度相同。
<div
style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>css