瀏覽器兼容性問題彙總

時間 2019-11-08

原文原文鏈接

# 瀏覽器兼容性問題彙總javascript

## 問題1css

### first-child ##html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div p:first-child {
color: red;
}
</style>
</head>
<body>

<div>
<p>Aloha!</p>
<p>Hello!</p>
</div>

</body>
</html>前端

**PS：**在IE6裏Aloha!並非紅色，是由於first-child這個屬性本就具備兼容性問題
解決：應避免使用first-child（看了後來組解決僞元素是在樣式加個空格，可是這個屬性我試過好像不行）java

## 問題2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

#box {
background-color:#eee;
/*border: 1px solid red;*/
/*解決方法*/
}
#box p {
margin-top: 20px;margin-bottom: 20px; text-align:center;
}
/*高度不適應高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節*/
/*，特別是當內層對象使用margin 或paddign 時。*/
.div1{
width: 200px;
height: 1px;
border: 1px solid red;
/*overflow: hidden;*/
}
/*沒法定義1px左右高度的容器 IE6下這個問題是由於默認的行高形成的,*/
/*解決方法/!*overflow:hidden | zoom:0.08 | line-height:1px*!/*/
</style>
</head>
<body>
<div id="box">
<p>p對象中的內容</p>
</div>
<div class="div1"></div>

</body>
</html>web

PS：當一個div裏有標籤元素的時候，div沒有被設置高度寬度。
當內層對象的高度發生變化時外層高度不能自動進行調節，好比內層對象使用margin-top，bottom 或paddign 時。這個解決辦法是在最外層加上邊框border就能用外層div一變化了。chrome

在IE6下沒法定義一個height: 1px的容器，這是由於IE下默認的行高是6px，這時只須要給容器加上overflow:hidden | zoom:0.08 | line-height:1px，這三個中的一個，都能定義這個元素，不會被默認行高影響express

## 問題3bootstrap

##在Firefox Opera中 button元素的子元素能夠溢出按鈕渲染

> 在html表單中，咱們通常會把input type = button 這個按鈕做爲一些功能使用，也能夠在裏面添加上圖片之類的東西以改變按鈕的樣子
> 基於這種應用，在Firefox 和 Opera 中，若是添加了子元素，而且子元素的寬或高高於父元素，那麼就會發生子元素溢出按鈕渲染的效果瀏覽器

/
<div style="width:65px; height:65px; background:#DDD;">
<button style="width:60px; height:60px; background:#AAA; padding:0;">
<div style="width:70px; height:70px; border:5px solid;"></div>
</button>
</div>
/

代碼中button按鈕的尺寸爲60X60，div的尺寸爲70X70，那麼，在各個瀏覽器中測試以後發現。

ie 6,7,8 谷歌瀏覽器並無發生溢出效果，但在Firefox 和 Opera中出現了溢出效果，

可見，在ie6,7,8和谷歌中 button元素擁有了相似與 overflow:hidden 的特性，因此溢出的被裁減掉

input[type=button]:一樣能夠用；

解決辦法，就是在其父元素（button）上添加一個overflow:hidden屬性；
另外一個解決辦法就是把前景圖改成背景圖，就不會發生溢出的效果；

## 問題4

###在ie6.7.8(Q),IMG元素的alt屬性會在沒有title屬性的時候被當成提示信息使用

####問題描述
在給IMG元素設置了alt 屬性值後，不但被做爲該元素的替代文字，還在該元素沒有指定 title 屬性時，做爲提示信息被顯示出來。

#####如如下代碼：
<img src="圖片路徑" alt="替代文字"/>

#####這段代碼在不一樣的瀏覽器環境中的表現：
- IE6 IE7 IE8(Q)—————IE8(S) 及其餘瀏覽器
- 有懸停提示————————無懸停提示

#####形成的影響
- 當用戶須要顯示提示框，但僅指定了 alt 屬性，則在 IE8(S) 及其它瀏覽器中將沒法顯示提示框；
- 當用戶不須要顯示提示框，而且指定了 alt 屬性，則在 IE6 IE7 IE8(Q) 中仍然會顯示提示框。

###問題分析
#####alt屬性：
- 一、用來指定替換文字（當圖片不能顯示時、做爲圖片被載入前）
- 二、在IE6 IE7 IE8(混雜模式)中 alt 屬性也扮演了在沒有 title 屬性的狀況下當用戶將鼠標移動到圖片上時顯示提示信息。（此錯誤在 IE8 標準模式中被修復。）

#####title屬性：
- 爲設置該屬性的元素提供建議性的信息（當鼠標懸停在特定元素上時顯示title文字爲提示信息）

所以根據alt 屬性在 IE6 IE7 IE8(Q) 下具備雙重意義。這些瀏覽器混淆了此屬性與 title 屬性。因此在沒有設置 title 屬性的狀況下，鼠標放在設置了 alt 屬性的img元素上時會彈出提示框。

###解決辦法：
#####須要提供額外的顯示信息
- <img src="圖片路徑" alt="替代文字" />
- 只會在ie中顯示提示信息，別的瀏覽器沒有
- 想在別的瀏覽器也顯示。就加上title="替代文字"

#####不想顯示額外的信息
- <img src="圖片路徑" alt="替代文字" />
- 只會在ie中顯示提示信息，別的瀏覽器沒有
- 都不想出現提示信息，就加上title=""

注意：不能由於不想出現提示信息。就不寫ALT屬性。這樣會給看不到圖像的閱覽者帶來困擾。

## 問題5

### 關於獲取滾動條高度的問題
在獲取滾動條高度時 chrome瀏覽器與其餘瀏覽器有所哦不一樣；
在chrome中用document.body.scrollTop;
而在其餘瀏覽器中用document.documentElement.scrollTop;

示例以下：

## 問題6
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:160px;height:20px;font-size:12px;line-height:20px;background-color:yellow
}
.t-1_t_{
background-color:#d4d4d4
};
.1{background-color:#A8A8A8};
.123456{background-color:#d4d4d4};
.2test{background-color:#A8A8A8};
.2-test{background-color:#d4d4d4};
.2_test{background-color:#A8A8A8};
.-test{background-color:#d4d4d4};
.-2test{background-color:#A8A8A8};
._test{background-color:#d4d4d4;};
._2test{background-color:#A8A8A8};
.-{background-color:#d4d4d4};
.---{background-color:#A8A8A8};
._{background-color:#d4d4d4};
.___{background-color:#A8A8A8};
._-{background-color:#d4d4d4};
.-_{background-color:#A8A8A8};
.___-{background-color:#d4d4d4};
.---_{background-color:#A8A8A8};
.---123{background-color:#d4d4d4}
.___123{background-color:#A8A8A8}
</style>

</head>
<body>
<div class="t-1_t_">字母開頭</div>
<div class="1">單個數字</div>
<div class="123456">多個數字</div>
<div class="2test">數字開頭 + [a-z][A-Z]</div>
<div class="2-test">數字 + "-" 開頭</div>
<div class="2_test">數字 + "_" 開頭</div>
<div class="-test">連字符(-)開頭 + [a-z][A-Z]</div>
<div class="-2test">連字符(-) + 數字開頭</div>
<div class="_test">下劃線(_)開頭 + [a-z][A-Z]</div>
<div class="_2test">下劃線(_) + 數字開頭</div>
<div class="-">單個連字符(-)</div>
<div class="---">多個連字符(-)</div>
<div class="_">單個下劃線(_)</div>
<div class="___">多個下劃線(_)</div>
<div class="_-">下劃線(_) + 連字符(-)</div>
<div class="-_">連字符(-) + 下劃線(_)</div>
<div class="___-">多個下劃線(_) + 連字符(-)</div>
<div class="---_">多個連字符(-) + 下劃線(_)</div>
<div class="---123">多個連字符(-) + 數字</div>
<div class="___123">多個下劃線(_) + 數字</div>
/*以數字開始的類名僅在 IE6(Q) IE7(Q) IE8(Q) 下被識別，而其它瀏覽器下則不識別（忽略該規則）。

解決方案
堅持以字母開頭命名選擇器，這樣可保證在全部瀏覽器下都能兼容。*/

</body>
</html>

----------
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
問題是：
IE6 及 IE7/8 的混雜模式下，非替換絕度定位元素當指定了 'left' 及 'right'，而 'width' 爲默認值 "auto" 。
此時瀏覽器沒法正確地計算出 'width' 的值，對於高度的計算也是如此。
<div style="background:gray; width:100px; height:100px; position:relative;">
<div id="d" style="background:black; position:absolute; left:10px; right:10px; top:10px; bottom:10px; color:white;">
test
</div>
</div>

替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。
例如瀏覽器會根據img標籤的src屬性的值來讀取圖片信息並顯示出來，而若是查看(X)HTML代碼，則看不到圖片的實際內容；又例如根據input標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。
(X)HTML中的img、input、textarea、select、object都是替換元素。這些元素每每沒有實際的內容，便是一個空元素，

b) 不可替換元素
(X)HTML 的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）。例如：
p段落的內容p
段落p是一個不可替換元素，文字「段落的內容」全被顯示。

</body>
</html>

----------
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#d {
background-color: black;
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
color: white;
_width: expression(
parseInt(this.offsetParent.currentStyle.width)
- parseInt(this.currentStyle.left)
- parseInt(this.currentStyle.right)
);
_height: expression(
parseInt(this.offsetParent.currentStyle.height)
- parseInt(this.currentStyle.top)
- parseInt(this.currentStyle.bottom)
);
}
</style>

</head>
<body>
<div style="background-color:gray;width:100px;height:100px;position:relative">
<div id="d">test</div>
</div>
解決方法：若能爲非替換絕對定位元素設定固定的寬度及高度，則儘可能不使用此方式自動計算絕對定位元素的 'width' 及 'height'；若沒法避免使用此方式，
則能夠經過判斷瀏覽器，
僅在 IE6 中使用 CSS Expression 控制絕對定位元素的寬度及高度。

</body>
</html>

## 問題7
### 當塊級元素裏面的內容超過div自己大小時會出現兼容性問題#
代碼以下:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height:20px;
width:100px;
background:gray;
/*默認是visible*/
/*overflow: hidden;*/
}
#d2{
margin-left:25px;
height:50px;
width:100px;
background:gold;
}
</style>
</head>
<body>
<div id="d1">
Test Test Test Test Test Test Test Test Test
</div>
<div id="d2" ></div>
</body>
</html>

解決辦法1:咱們給div設置相應的寬高,不讓子元素超出父元素的範圍

解決辦法2: 給父元素設置 overflow:hidden 文本溢出.

## 問題8
標準參考
關於 'list-style-position' 屬性說明請參照 W3C CSS 2.1 規範： http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position
問題描述
IE6 IE7 IE8(Q) 中 UL 標記爲實現放置 LI 元素標記框 'outside' 設置時所使用的樣式設定不一樣於其餘瀏覽器。
形成的影響
IE6 IE7 IE8(Q) 內 LI 元素樣式內設置了 ‘list-style-position:outside’ 後其溢出容器的標記框會被裁切。
受影響的瀏覽器
IE6 IE7 IE8(Q)
問題分析
'list-style-position' 特性的主要說明標記框 (marker box) 在主塊框 (LI) 的位置，他的默認值是 'outside'。在 CSS 2.1 規範中沒有明確說明標記框的位置，可是說明在 'outside' 特性值設置狀況下，若是 'direction' 特性值爲 'ltr' 時，標記框應該存在於內容左側，當 'direction' 特性值爲 'rtl' 時，標記框應該存在於內容右側。
正是因爲規範中存在定義模糊，各個瀏覽器對此狀況實現均有不一樣。一般狀況下，LI 標記由 UL 標記和 OL 標記包裹，分析如下代碼：
<ul style="background:#CCC;"> <li style="background:#AAA;">A</li></ul><ol style="background:#CCC;"> <li style="background:#AAA;">B</li></ol>
實際運行結果：
IE6 IE7 IE8(Q) IE8(S) Firefox Safari Chrome Opera

能夠明顯看出，不一樣瀏覽器中 UL 和 OL 元素的背景顯示不一樣。在 IE6 IE7 IE8(Q) 中沒有顯示出背景顏色。根據盒模型分析，他們的默認 margin 和 padding 值不一樣。
繼續加入樣式檢測代碼，來驗證這個假想：

if(!window.getComputedStyle){ window.getComputedStyle=function($target){ return $target.currentStyle; }; } var ul = document.getElementsByTagName("ul")[0]; var ol = document.getElementsByTagName("ol")[0]; alert('UL default display value:' + getComputedStyle(ul,null).display + "\n" + 'OL default display value:' + getComputedStyle(ol,null).display + "\n" + 'UL margin-left value:' + getComputedStyle(ul,null).marginLeft + "\n" + 'UL padding-left value:' + getComputedStyle(ul,null).paddingLeft + "\n" + 'OL margin-left value:' + getComputedStyle(ol,null).marginLeft + "\n" + 'OL padding-left value:' + getComputedStyle(ol,null).paddingLeft + "\n" )

運行結果彙總以下：

IE6 IE7 IE8(Q) IE8(S) Firefox Safari Chrome Opera
UL default display value: block block
OL default display value: block block
UL margin-left value: 30pt 0px
UL padding-left value: 0px 40px
OL margin-left value: 30pt 0px
OL padding-left value: 0px 40px
從實際運行結果能夠看出 IE6 IE7 IE8(Q) 內實現 UL OL 標記樣式時使用的 'margin' 值設定，而其餘瀏覽器則用 'padding' 值設定。
現將 UL OL 標記的 'margin:0' 樣式設置加入，分析如下代碼效果：
<ul style="margin:0;background:#CCC;"> <li style="background:#AAA;">C</li></ul><ol style="margin:0;background:#CCC;"> <li style="background:#AAA;">D</li></ol>
顯示效果以下表：
IE6 IE7 IE8(Q) IE8(S) Firefox Safari Chrome Opera

明顯的，因爲其 margin 值被設置爲0，致使 IE6 IE7 IE8(Q) 中 UL OL 標記內的 LI 元素，標記框 ( marker box ) 從左側溢出標記容器而沒有被顯示。
同理，在 IE8(S) Firefox Safari Chrome Opera 瀏覽器中，標記框能夠顯示是由於，他們中 UL OL 標記都是用 'padding' 值定位內部元素位置。若是將 'padding' 值設置爲 0，一樣會出現 IE6 IE7 IE8(Q) 中的狀況。
解決方案
能夠將 IE6 IE7 IE8(Q) 瀏覽器的 UL OL 標記 'margin-left' 和 'padding-left' 特性值更改成與其餘瀏覽器樣式一致。

例如：
ul,ol{margin-left:0;padding-left:40px;}

## 問題9

###1.解決圖片上下邊距間隙問題
一張前景圖載入頁面時圖片的上下放都有必定的間隙
這是正常的可是有時會影響佈局，
咱們都瞭解 img是個行標籤
因此能夠解決的方法就是把行標籤轉換成塊級標籤就行

代碼以下：

div {
border: 1px solid red;

}
img{
/*display:block;*/

}
</style>

###2.當a標籤hover後在ie6下出現的兼容性問題

通常來說，a標籤在IE下通常是不會出現兼容性問題，
有一點是例外的

代碼以下：

}
</style>

當a標籤裏面放一張圖片的時候在其餘瀏覽器裏的圖片hover後效果是不變的可是在IE6中 a的hover就失去的做用

解決的辦法：惟一的辦法，不在a中使用圖片能夠加入特殊的字體符號（如bootstrap裏面的一些組件）

## 問題10
IE下z-index的bug
在IE瀏覽器中，定位元素的z-index層級是相對於各自的父級容器，因此會致使z-index出現錯誤的表現。解決方法是給
其父級元素定義z-index，有些狀況下還須要定義position:relative。

## 問題11

### 解決背景色透明度的方法：

###問題
首先先創建一個簡單的紅色背景的div，該div透明度用opacity設置，在chrome，Firefox，opera等瀏覽器中可看到透明效果，但在IE六、七、8當中
不能實現。

###解決方法
在CSS樣式中加filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50 )便可.

## 問題12
document.getElementsByClassName()在IE六、7中會不分大小寫，而在谷歌中會區分大小寫
爲了不這個兼容性，書寫代碼的時候要規範。

## 問題13
### table單元格間距兼容問題
table中設置單元格間距
問題：
table{
border-spacing:10px;
}
border-spacing在IE六、IE7中無效

解決方法：
設置table屬性cellspacing
<table cellspacing="10">
</table>

## 問題14
### 浮動的塊級元素
狀況：浮動的塊級元素後面有一個行內元素，兩個元素都由內容撐開。
結果：1.在Chrom下，塊級元素會比後面的行內元素上下分別多1px
2.在IE6下，兩個元素會產生3px的邊距
解決：1.給行內元素設置屬性以下：
border:1px solid red(與行內元素背景一致)
border:0px solid white \0
2.給行內元素設置屬性以下：
margin-left:-3px;

## 問題15
### table設置合併行寬的兼容問題-侯靜秋
<script type="text/javascript">
window.onload = function() {
function $(id) {
return document.getElementById(id);
}

$("info").innerHTML = "red cell clientWidth : " + $("td1").clientWidth +
"<br/>blue cell clientWidth : " + $("td2").clientWidth +
"<br/>gold cell clientWidth : " + $("td3").clientWidth;
}
</script>
//合併表格的行的時候，若是要設置寬度，要保證谷歌和IE的佈局同樣
<table id="T" style="color:white;" cellpadding="0" cellspacing="0" >
<tr>
//若是要設置固定的寬，則全部的td都要設置固定的寬，或者隨意給一個td設置爲auto，不能只設置一個，另一個不設置或者設置爲auto
<td id="td1" style="background-color:red;">td1</td>
<td id="td2" style="background-color:blue; width:100px;">td2</td>
</tr>
<tr>
<td id="td3" style=" background-color:gold; width:300px;" colspan="2">td3</td>
</tr>
</table>
computed clientWidth:
<div id="info" style="border:1px dashed red; width:300px;"></div>
## 問題16
### 圖片浮動兼容性問題-楊鵬

狀況：在IE6中圖片會和父元素產生3px的間距，以及在IE6下position:aboslute會使元素消失。
解決：給圖片設置dispaly=block；在給元素position:aboslute後必定要給left值。
## 問題17
### first-letter兼容性問題-王昶
<style>

p:first-letter{
/*在IE6中沒法正常顯示*/
font-size: 300%;
}
/*解決辦法*/
/*在first-letter後面加上空格*/
/*p:first-letter { */
/*font-size: 300%;*/
/*}*/
/*緣由是僞類名字中帶有-，會對IE6形成BUG*/
</style>
</head>
<body>
<p>朗沃前端</p>
</body>
</html>
## 問題18
<style>
a:link{
color: green;
}
a:visited{
color: blue;
}
a:hover{
color: red;
}

</style>
<a href="#">百度一下</a>
/*
hover寫在後面時點擊跳轉後，hover再也不起做用（瀏覽器緩存問題）。解決:按照link visited hover link書寫
*/

## 問題19

### 問題描述

IE6 IE7 IE8(Q) 下，若浮動元素以前存在兄弟行內非浮動元素，IE 會將浮動元素所在的「當前行」認爲是其前邊的兄弟行內元素所產生的匿名框的底邊，致使該浮動元素折行。

### 形成的影響

若是咱們僅僅在 IE6 IE7 中編寫頁面並進行測試，當看到上面對測試代碼的截圖中的效果，在不清楚致使右浮動元素換行的緣由是 IE6 IE7 對於同一行內浮動元素與非浮動行內元素的處理存在 Bug 的狀況時，有可能會爲右浮動元素設置一個負值 'margin-top'，這樣雖然在 IE6 IE7 中能保證佈局的正常，但在其餘瀏覽器下就會出現異常。

### 受影響的瀏覽器

IE6 IE7 IE8(Q)

### 問題分析

分析如下代碼：

<div style="border:1px solid black; font:14px Verdana; padding:5px;">
<span style="background:gold;">Text1</span>
<span style="background:lightblue;">Text2</span>
<span style="background:pink;">Text3</span>
<span style="background:greenyellow;">Text4</span>
<span style="background:peru;">Text5</span>
<span style="background:tomato; float:right;">Some text aligning right</span>
</div>

### 谷歌等下效果如：
<div style="border:1px solid black; font:14px Verdana; padding:5px;">
<span style="background:gold;">Text1</span>
<span style="background:lightblue;">Text2</span>
<span style="background:pink;">Text3</span>
<span style="background:greenyellow;">Text4</span>
<span style="background:peru;">Text5</span>
<span style="background:tomato; float:right;">Some text aligning right</span>
</div>

在 IE6 IE7 IE8(Q) 中，浮動的 SPAN 折行浮動在新的一行上，同時位置也脫離了其父容器；
在其餘瀏覽器中，則遵守 CSS 2.1 規範對浮動的定義，將浮動元素顯示在浮動框另外一邊的第一個可用行上。

在 IE6 IE7 下，測試代碼沒有達到咱們預計的效果，右浮動的 SPAN 折行浮動在新的一行上，同時位置也脫離了其父容器。如今看看 Text一、 Text2……Text5 所在的 SPAN 元素做爲浮動框以前當前行的內容，應該顯示在浮動框另外一邊的第一個可用行上。右浮動的 SPAN 緊貼在其父容器的右邊界，其左側的空白區域只要有足夠的空間容納這 5 個非浮動的 SPAN 元素，它們就應該保持與右浮動的 SPAN 元素位於同一行上。這裏 IE6 IE7 以及全部版本 IE 的混雜模式的處理均是錯誤的。

### 此問題的觸發條件

1同一個父容器內有多個行內元素；

2某些爲非浮動元素，某些爲浮動元素（能夠是左浮動或右浮動）；

3浮動的子元素不都是位於非浮動的子元素以前。

### 解決方案

依具體狀況可使用三種方法：使用絕對定位模擬右浮動、使用 IE hack 專門在IE6 IE7 中設置負的上外邊距、將右浮動的 SPAN 元素調整到全部非浮動 SPAN 元素以前。

1 使用絕對定位（position:absolute）模擬右浮動（float:right）。爲了不 IE6 IE7 的這個 BUG，能夠不使用右浮動，而是用絕對定位及右偏移（right:XXXpx），如爲右浮動元素設置 'position:absolute' 及 'right:3px' 替代 'float:right'，但這樣作的代價是必須爲父容器 DIV 元素設置 'postion:relative'，這麼作仍然會破壞原文檔結構。因此咱們並不推薦此方法。

2使用 IE hack 專門在IE6 IE7 中設置負的上外邊距（margin-top:-XXXpx）。既然此 Bug 爲IE6 IE7 專有，則只須要在 IE6 IE7 下爲右浮動元素設置一個負的上外邊距便可，其餘瀏覽器保持原樣式。因此能夠考慮使用只有 IE6 IE7支持的 hack 方式：在 CSS 特性前加星號 '*'。如 *margin:-23px 5px 0 0，這樣既可消除 IE6 IE7 中的 Bug，可是這麼作是利用了瀏覽器的 Bug，並無消除 Bug。在能有個更好的解決方法的時候，不推薦使用 CSS hack 來解決問題。

3調整SPAN元素的位置。經過上面總結的 Bug 觸發條件，咱們能夠考慮直接調整父容器中 SPAN 子元素的位置來回避 IE6 IE7 中此 Bug，即將右浮動的 SPAN 元素調整到全部非浮動 SPAN 元素以前。

## 問題20

### 問題描述

在IE6 IE7 IE8(Q)中，若是 clear 特性被設置在一個浮動的元素上，該浮動元素會與其前邊的浮動元素放置在同一行。

在IE6 IE7 IE8(Q)中，若是 clear 屬性被設置到一個浮動的元素上，位於其後的浮動元素的外頂邊高於該元素的外頂邊。

### 形成的影響
在IE6 IE7 IE8(Q)中，clear 特性被設置在一個浮動的元素上時，形成頁面佈局錯亂。

### 受影響的瀏覽器
IE6 IE7 IE8(Q)

### 問題分析

對於上述兩個問題，咱們經過如下的測試用例來講明。

分析如下代碼：

<div id= "Container" style= "width:300px; height:200px; border:1px solid red; ">
<div id= "DIV1" style= "float:right; width:150px; height: 50px; background-color:darkgray; ">1 float:right;</div>
<div id= "DIV2" style= "clear:right; float:right; width:250px; height: 50px; background-color:silver; ">2 clear:right; float:right;</div>
<div id= "DIV3" style= "float:left; width:100px; height: 50px; background-color:gray; ">3 float:left;</div>
/div>

谷歌等效果以下

### 解決方案

不要將 'clear' 特性應用在浮動元素上，以避免出現上述不兼容的問題。

## 問題21

### 零寬高的 IFRAME 元素的實際尺寸在不一樣瀏覽器中有差別#

問題描述

在 IE6 IE7 IE8 中，'width' 或 'height' 任意一個或兩個都設置爲 '0' 的 IFRAME 元素是不可見的，而在其它瀏覽器中這樣設置後的 IFRAME 元素仍可見。

形成的影響
該問題將形成局部佈局錯亂或視覺效果有差別。

受影響的瀏覽器
全部瀏覽器
問題分析
IFRAME 元素的默認樣式在各瀏覽器下是不一樣的，其 'border-style' 的默認值在 IE 中是 'none'，在其餘瀏覽器中則爲 'inset'，而其 'border-width' 的默認值在 IE 中是 'medium'，在其餘瀏覽器中則爲 '2px'。也就是說，默認狀況下，IFRAME 的邊框在 IE 中是不可見的，而在其餘瀏覽器中則能夠看到 2px 寬的邊框。1

所以即使設置其寬或高爲 0，也只能保證在 IE 中不可見，在其餘瀏覽器中，其邊框則是可見的。

測試代碼以下（本問題不區分瀏覽器模式）：

<div style="width:400px; background:gold;">
<span>iframe 1</span><iframe style="width:0;"></iframe><br/>
<span>iframe 2</span><iframe style="height:0;"></iframe><br/>
<span>iframe 3</span><iframe style="width:0; height:0;"></iframe>
</div>
這段代碼各瀏覽器中的表現以下：

**IE6 IE7 IE8 運行效果**

沒有邊框

**Firefox 運行效果截圖**

有邊框

**Safari 運行效果截圖**

有邊框

**Chrome 運行效果截圖**

有邊框

可見：經過使用零寬高隱藏 IFRAME 僅在 IE 中可行，在其餘瀏覽器中沒法實現。

注：

寬高不爲 0 的 IFRAME 在 IE 能看到「邊框」，但這個「邊框」並非 IFRAME 元素自己的邊框，而是其嵌入的文檔的邊框。
解決方案

根據實際狀況選擇使用 'visibility:hidden' 或者 'display:none' 隱藏 IFRAME 。

## 問題22
###table中td的寬度大於table的寬度在IE和其它瀏覽器中效果不同###

<table border="1" style="table-layout:fixed; width:80px;">
<tr>
<td><div style="width: 120px; height:30px; background:#CCC;"></div></td>
</tr>
</table>
<p>IE6,IE7table會將td溢出的部分隱藏,</p>
<p>IE8和chrome瀏覽器對於的部分會溢出</p>
####解決辦法:給table添加overflow:hidden####
<table border="1" style="table-layout:fixed; width:80px;overflow:hidden">
<tr>
<td><div style="width: 120px; height:30px; background:#CCC;"></div></td>
</tr>
</table>
<p></p>
<p></p>
<p></p>

## 問題23

### 問題描述##
IE6 IE7 IE8(Q) 中空 TABLE 的寬度和高度均爲0，IE8(S) Firefox Chrome Safari Opera 中空 TABLE 的寬度和高度是設置的值。

###形成的影響###
此問題致使 IE6 IE7 IE8(Q) 與其餘瀏覽器不一樣，形成佈局混亂。
受影響的瀏覽器
IE6 IE7 IE8(Q)
###問題分析###
定義一個空 TABLE ，設置 'width' 和 'height' 均是100px，
代碼以下：

<!DOCTYPE html>
<html>
<body>
<table style="background:gray; width:100px; height:100px;"></table>
</body>
</html>
IE6 IE7 IE8(Q) 中，空 TABLE 的寬度和高度均爲 0。
IE8(S) Firefox Chrome Safari Opera 中，中空 TABLE 的寬度和高度是設置的值，符合規範。

### 解決方案 ###
避免出現空 TABLE，保證各瀏覽器兼容。

## 問題24
cells 屬性是應用在 HTMLTableRowElement（TR）上的，返回該列的單元格集合
對 TABLE 元素使用 cells 屬性只有 IE6 IE7 IE8 Opera 支持。
cells 集合返回 TABLE 元素內全部的 TD TH 元素的集合。

所支持的瀏覽器
IE6 IE7 IE8 Opera

解決方案
避免使用 TABLE 的 cells 屬性獲取元素，而對 table row(TR) 使用 cells 屬性，
或用 document.getElementsByTagName 等方式獲取元素。

代碼以下：

<body>
<table id="A" name="An">
<tr id="B" name="Bn">
<td id="C" name="Cn"></td>
</tr>
<tr>
<td></td>
</tr>
</table>

</body>

<script>

document.write("table.cells : " + document.getElementById("A").cells); //IE外的都不兼容

document.write("table.tr.cells : " + document.getElementById("B").cells); //都兼容

document.write("table.td: " + document.getElementById("C")); //都兼容

document.write("table.cells : " + document.getElementsByName("An")); //都兼容

document.write("table.tr.cells : " + document.getElementsByName("Bn")); //都兼容

document.write("table.td.cells : " + document.getElementsByName("Cn")); //都兼容

document.write("table.tr.cells : " + document.getElementsByTagName("tr")); //都兼容

document.write("table.td.cells : " + document.getElementsByTagName("td")); //都兼容

</script>

## 問題25
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.d0 {
height: 100px;
}
.dd {
height: 49px;
border-top: 1px solid red;
}
.d1 {
position: absolute;
top: 150px;
left: 50px;
width: 1000px;
height: 500px;
font-size: 150px;
background-color: rgba(0, 255, 255, 0.3);
line-height: 0;
}
input {
height: 50px;
font-size: 20px;
}
img {
display: inline-block;
height: 50px;
width: 200px;
border: 1px solid blue;
font-size: 30px;
}
</style>
</head>
<body>
<div class="d0"></div>
<div class="dd">-50</div>
<div class="dd">0</div>
<div class="dd">50</div>
<div class="dd">100</div>
<div class="dd">150</div>
<div class="dd">200</div>
<div class="dd">250</div>
<div class="d1">
<input type="button" value="fxg1"/>
fxg2
<img src="../ds" alt="meiyou"/>
</div>
</body>
</html>

## 問題26

1. 1.子選擇器在IE6中不能使用
1. 產生條件：IE6瀏覽器，使用E>F子選擇器；
1. 解決辦法：採用其餘選擇器或者採用後代選擇器進行控制，如：div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*子選擇器在IE6中不能使用*/

/*產生條件：IE6瀏覽器，使用E>F子選擇器；*/

/*解決辦法：採用其餘選擇器或者採用後代選擇器進行控制，
如：div p{margin:10px;} div p*/
/*p{margin:0;}替代掉 div>p{margin:10px;}。*/
div>p{
font-size: 30px;
color: red;
}
/*div p{*/
/*font-size: 30px;*/
/*color: red;*/
/*}*/
</style>
</head>
<body>
<div>
<p> 頁面 </p>
</div>

</body>
</html>

1. 2. 文字大小不兼容。
1. 一樣14px的宋體字，ie下實際佔高16px，下留白3px，firefox下實際佔高17px，上留白1px，下留白3px。
1. 文字大小不兼容解決方案：給全部文字設定通用line-height值

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*一樣14px的宋體字，ie下實際佔高16px，下留白3px，firefox*/
/*下實際佔高17px，上留白1px，下留白3px。*/
/*文字大小不兼容解決方案：給全部文字設定通用line-height值*/
p{
border: 1px solid black;
height: 40px;
font-size: 14px;
/*line-height: 40px;*/
}
</style>
</head>
<body>
<p> 文字大小兼容性問題 </p>
</body>
</html>

## 問題27

根據 W3C CSS2.1 規範中的描述，position:fixed 固定定位是絕對定位的子類。與絕對定位不一樣的是，固定定位的包含塊由視口（viewport）建立的。

'position' 特性的 fixed 值容許一個元素絕對的相對於瀏覽器窗口定位。

關於 'position:fixed' 的詳細信息，請參考 CSS 2.1 規範 9.6.1 Fixed positioning 中的內容。

在 CSS 1 版中，沒有 position 定位特性，僅支持 CSS 1 的瀏覽器將不會擁有人和定位效果。

問題描述

IE6 IE7(Q) IE8(Q) 不支持固定定位（position:fixed），對其設置 'position:fixed' 無任何效果。

形成的影響

因爲 IE6 IE7(Q) IE8(Q) 將 'position' 特性的 fixed 值看成錯誤值處理，從而使用 'position' 特性的初始值 static，即這個元素在 IE6 IE7(Q) IE8(Q) 變成了普通流中的靜態元素，這將會形成佈局混亂等多種兼容性問題。

受影響的瀏覽器

IE6 IE7(Q) IE8(Q)

問題分析

對於此問題，咱們經過如下的測試用例來講明。

分析如下代碼：
<div id="DIV1" style="float:left; height:3000px;"></div>
<div id="DIV2" style="position:fixed; top:300px;">fixed div</div>■DIV1 的高度爲 3000px，使瀏覽器窗口出現滾動條；
■DIV2 是固定定位元素，它的位置不會隨頁面滾動而變化。

根據 CSS2.1 規範中的描述可知，當頁面中滾動條滾動時，DIV2 的位置應該不發生變化。

以上測試用例在不一樣的瀏覽器中打開，除 IE6 IE7(Q) IE8(Q) 外，滾動窗口，DIV2 中的文本「fixed div」會一直位於窗口中部。

【注】：從 IE6 開發以及發佈時間可知，當時 CSS 2.0 的成文規範尚未推出。反觀 MSND 中說明 IE 4.0 版本以上即支持除 'position:fixed' 外其定位特性值設置。這意味着 IE6 以及以前的 IE 版本所支持的 'position' 特性並不是 CSS 2.0 規範中描述的定位特性，他是遵循 IE 自身定義的渲染規範的。

解決方案

在 IE6 IE7(Q) IE8(Q) 中爲固定定位元素設置 'position:absolute'，再經過 JavaScript 腳本或者 CSS Expression 動態設置其偏移量。

參考代碼以下：

## 問題28

getyear()獲取年份的兼容性

## 問題29

IE兼容性問題
在 IE6 IE7 下，當咱們設置了 'background-image' 背景圖,
而且 'background-attachment' 特性值爲 'scroll' 時，元素的背景圖片會隨着元素內容滾動。

<div style="background:url(image/3page-img4.jpg) repeat-x scroll 0 0 #FFFFFF;width:300px;
height:200px;overflow:auto;">
<div style="background:yellow;height:200px;width:40px;">
inner content inner content inner content inner content inner content
</div>
<div style="width:400px;text-align:right;">
OUTER CONTENT
</div>
</div>

若須要在全部瀏覽器下元素圖片不隨元素內容滾動，則不給元素設置任何背景，而且在元素的父元素上設置背景圖

<div style="background:url(image/3page-img4.jpg) repeat-x scroll 0 0 #FFFFFF;width:300px;">
<div style="width:300px;height:200px;overflow:auto;">
<div style="background:yellow;height:200px;width:40px;">
inner content inner content inner content inner content inner content
</div>
<div style="width:400px;text-align:right;">
OUTER CONTENT
</div>
</div>
</div>

若須要在全部瀏覽器下元素圖片隨元素內容滾動，則不設置元素背景，
而設置元素內容的背景圖片並設置 'background-attachment : scroll'；

<div style="width:300px;height:200px;overflow:auto;">
<div style="background:url(image/3page-img4.jpg) repeat-x scroll 0 0 #FFFFFF;">
<div style="background:yellow;height:200px;width:40px;">
inner content inner content inner content inner content inner content
</div>
<div style="width:400px;text-align:right;">
OUTER CONTENT
</div>
</div>
</div>

## 問題30

漸變gradient css代碼 .gradient-chrome{ /*background:-moz-linear-gradient(bottom,red,green);*/ background:linear-gradient(bottom left,red,yellow,green); background: -webkit-linear-gradient(bottom left,red,yellow,green); background: -moz-linear-gradient(bottom,red,yellow,green); /*最好加上前面的-webkit-，-moz-等*/ } .gradient-IE{ filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr=pink, endColorstr=black ); /*IE7*8*9有效*/ } html代碼 <h1>背景色漸變兼容寫法：linear-gradient----IE10如下無效，部分支持IE10，支持chrome,火狐</h1> <p>這是CSS3新屬性：用線性漸變建立圖像，一共有三個參數，見下<br/> 語法是：linear-gradien(線性漸變的方向,起點顏色，終點顏色)<br/> 關於第一個參數：能夠不寫，默認是從上到下。其實，也能夠在起點顏色和終點顏色中間加入更多的顏色參數，就能實現多色漸變<br/> top:從上到下，left:從左到右，right:從右到左，top left:左上到右下，也能夠用角度來指定好比-90deg</p> <p>雖說IE10支持，可是第一個參數（漸變方向）支持的不夠多</p> <h1>IE10如下的背景色漸變：</h1> <p>其實是利用了filter濾鏡是來實現： ie7*8*9有效，其餘ie版本無效，ie6網上有說有效，然而我電腦並無IE6，測不到，據傳聞ieTester並非真正的模擬了IE6, <br/> filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=red, endColorstr=blue);/*IE<9>*/ <br/> 其中：GradientType=1表明縱向，0表明橫向; <h2 class="gradient-IE">背景色漸變效果IE。 gradient [ˈgreidiənt] n.坡度，斜度</h2> <h2 class="gradient-chrome">背景色漸變效果chrome</h2>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。