CSS兼容處理的相關案例
- 雙倍顯示：這個BUG出如今IE6以及下瀏覽器，當解析浮動元素時，會錯誤地把浮向邊邊界加倍顯示。
修復問題方式： display：inline;css
代碼示例：html
/*[IE6及更低版本瀏覽器雙倍浮向 hack]*/windows
div {瀏覽器
margin：10px;佈局
float：left;設計
width：100px;htm
height ：100px;utf-8
display：inline;/*屏弊IE6及更低版本瀏覽器雙倍浮向 hack*/it
}io
具體詳解：
因浮動元素自動以塊狀顯示，將元素設成display：inline，在這裏彷佛沒有做用，但卻能夠修改這個BUG.
- 多出3像素：這個Bug在IE6及更低版本瀏覽器中存在。在windows系統中，IE5.x和IE6在解析浮動元素與流動文本環繞時，流動元素會莫名其妙地多出3像素寬的補白。
修復問題方式：margin-right:-3px;
代碼示例：
#float {
float：left;
width：100px;
height：100px;
border：4px red solid;
}
#flow {
border：4px solid blue;
margin-left：120px;
}
*html #float {
/*過濾器，在IE6及更低版本瀏覽器中清除浮動元素右側的3像素空隙*/
margin-right:-3px;
}
*html #flow {
height：1%;
}
具體詳解：
在IE6和IE5.X瀏覽器中，如上述代碼所述。當固定寬度兩欄佈局時，若是左邊浮動，右欄流動，則右欄就會多出3像素的寬度。
- 高度不適應：當元素內的子元素大小發生變化時，而外部元素的大小卻不能自動進行調整。嚴格講不算是一個Bug。由於根據CSS規則內外元素嵌套時會存在邊界重疊現象，不一樣瀏覽器都會支持這個重疊。
解決方式：
#content {
/*父元素*/
background：#EEDC82;
margin：20px auto;
overflow：auto;/*在標準瀏覽器中定義父元素可以自適應高度*/
display：inline-block;/*在IE6及更低版本中定義父元素爲內聯塊狀顯示強迫自動伸縮*/
}
P {
/*子元素*/
height：100px;
border：20px solid blue;
margin:20px;.
}
代碼示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#content {
/*父元素*/
background：#EEDC82;
margin：20px auto;
}
p {
/*子元素*/
height：100px;
border：20px solid blue;
margin：20px;
}
</style>
</head>
<body>
<div id="content">
<p>內部文本</p>
</div>
</body>
</html>
具體詳解：
根據常理計算，P元素的高度應爲180像素，外部div元素的高度爲220像素。但實際上div元素的高度僅爲180像素。根據CSS規則，丟失部分已發生了重疊。
實際設計中是不但願它們上下邊界重疊，而是根據內部元素的大小可以自適應高度，實現佈局的合理性。
- 多餘字符：這個Bug在IE6版本瀏覽器中存在。
解決方式：不要在浮動元素中間添加註釋。
代碼示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
width：100%; /*佔滿窗口*/
float：left; /*浮動佈局*/
}
</style>
</head>
<body>
<div>文本行</div>
<div>文本行</div>
<div>文本行</div><!---->
<div>文本行</div>
</body>
</html>
具體詳解：
若是繼續添加更多的註釋，會繼續餘出更多字符，如此重複。
當超過最後一行字符長度時會顯示更奇怪的顯示效果，甚至顯示腳本錯誤提示。
- 定位異常：這個Bug在IE6及更低版本瀏覽器中存在。
解決方式：
利用過濾器爲IE6及更低版本瀏覽器定義一個高度，強迫相對元素擁有佈局屬性。
*html #box {
/*定位 Hack*/
height：1%;
}
代碼示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<title></title>
<style tyle="text/css">
#box {
/*父元素相對定位*/
position:relative;
}
#absoulte1，#absoulte2，#absoulte3 {
/*子元素絕對相對定位*/
position：aboulte;
width：100px;
height：100px;
border：solid red 4px;
}
#absoulte1 {
/*第一個子元素定位座標，位於包含塊的左上角*/
top：0px;
left：0px;
}
#absoulte2 {
/*第二個子元素定位座標，位於包含塊的右上角*/
top：0px;
right：0px;
}
#absoulte3 {
/*第三個子元素定位座標，位於包含塊的右上角*/
bottom：0px;
left：0px;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/>
<div id="box">
<div id="absoulte1"></div>
<div id="absoulte2"></div>
<div id="absoulte3"></div>
</div>
</body>
</html>
具體詳解：把絕對定位的元素嵌入相對定位元素中能夠實現靈活佈局，但在IE6及更低版本瀏覽器中解析時卻存在問題。
- 捉迷藏：
解決方式：去除父元素的背景色，或爲父元素指定固定高度和寬度，也能夠爲浮動元素和父元素定義position屬性爲relative,均可以免此類問題的發生。
代碼示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#content {
/*父元素屬性*/
background: #EEE8AA;/*定義了父元素的背景色*/
}
#left {
/*左側欄目佈局屬性*/
float：left;/*浮動佈局*/
border：1px solid red;
width：200px;
height：200px;
}
#bottom {
/*底部欄目佈局屬性*/
clear：both;/*定義清除屬性*/
height：50px;
width：100%;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
左側欄目<br/>
左側欄目<br/>
左側欄目<br/>
...
</div>
<div id="right">
右側欄目<br/>
右側欄目<br/>
右側欄目<br/>
...
</div>
<div id="bottom">底部欄目</div>
</div>
</body>
</html>
具體詳解：
問題描述：這個Bug在IE6版本瀏覽器中存在。在特定條件中，標準佈局頁面被刷新或從新下載時，會發現某些內容消失了，當再次刷新或選中時纔會顯示出來。
問題根源：原來它們都隱藏在父元素背景以後，出現這種Bug多由於浮動元素與流動元素混和佈局，後面元素又被設置了clear屬性。
若是設置了父元素的背景色，當加載頁面時，流動元素內的內容可能會隱藏在父元素下而看不見。
- 百分比取值：
解決方法：在右側子元素中定義clear屬性爲right。如：
#right {
background：blue;
clear：right;/*清除右側浮動*/
}
代碼示例：
當兩個並列浮動的子元素寬度都爲50%時，在IE怪異模式中有時會出現錯行現象。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#content { width：403px; /*奇數寬度*/} /*定義父元素的寬度*/
#left,#right {
/*浮動子元素*/
float：left;
width：50%; /*各佔一半寬度*/
height：100px;
}
#left { background：red; } /*左側子元素屬性*/
#right { background：blue; } /*右側子元素屬性*/
</style>
</head>
<body>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
具體詳解：
這個Bug在IE怪異模式中存在。像素值是沒有數值的，可是當佈局中使用百分比設置單位時，就會存在計算的像素值出現小數部分。
對於小數值問題、不一樣類型瀏覽器取捨方法不一樣，IE怪異模式將根據四捨五入的方法進行計算。
標準瀏覽器對於小數值通常採起忽略不計的方法，多出值將按元素順序進行分配。
例如：
包含框寬度爲11像素，平分3個子元素，則每一個子元素平分3像素，多出的2像素按順序分給第一個和第二個子像素;
若是包含框寬度爲10像素，則每一個子元素平分爲像素，多出的1像素分給第一個子元素。
- 丟失項目符號：
解決方法：當給列表父元素添加15像素的左補白時才能夠顯示出來，而在IE5.X及更低版本中須要添加16像素的左補白才能夠顯示。
如：
#right {
/*[項目符號隱藏Hack]*/
width：400px;
float：left;
border：solid 1px blue;
padding-left：16px; /*適用IE5.X及更低版本*/
padding-left：15px; /*適用IE6版本*/
}
代碼示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#left {
/*左側浮動項目*/
width：100px;
height：100px;
float：left;
border：solid 1px read;
}
#right {
/*右側浮動項目*/
width：400px;
float：left;
border：solid 1px blue;
}
ul {
/*清除列表項目縮進*/
margin：0;
padding：0;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
</div>
</body>
</html>
具體詳解：
這個Bug在IE怪異模式中存在，當清除列表縮進之後，會忽然發現列表項符號在IE中不見了。
因爲列表的左邊沿起始位置是列表項內容的左側，而非列表項符號，故當列表的補白設爲0時，列表項符號的實際位置是負值。
標準瀏覽器通常不會解析負補白，而是忽略負值，但IE就會將負值的列表項符合隱藏起來。
- 內容溢出：
解決方法：
若是已經設置了寬和高，而且沒有意識到內容的多少實際上比設置的值要大。這種狀況很好狀況。
只要瞭解內容的準確大小，併爲父元素從新設置合適的尺寸便可。
若是包含區域是動態內容，沒法靜態肯定大小，可使用min-height屬性來修復這個溢出行爲。
例如：
/*[IE7盒模型溢出兼容解決方案]*/
#box {
/*父元素佈局屬性*/
width：100px;
_height：100px;/*過濾器，在IE6及更低版本中適用*/
min-height：100px;/*限定最小高度，在現代標準瀏覽器中適用*/
border：double red 2px;
}
#sub_content {
/*子元素佈局屬性*/
width：200px;
height：200px;
margin-top：50px;
margin-left：50px;
border：thin dashed blue;
}
爲了確保該行爲在更低版本IE中不會發生改變，推薦使用條件註釋設計IE不一樣版本的兼容樣式表。方法是新建一個針對IE6及更低版本的樣式表文件。
/*[樣式表文件，針對IE6及更低版本瀏覽器使用]*/
#box {height：100px;}
而後利用IE條件語句導入樣式表文件，這是一個簡單、可維護的方法，用來將更老的IE版本中的行爲從IE7中的更加標準的行爲中分離出來。
若是沒有給父元素設置寬和高，應該爲父元素定義overflow:visible;聲明，那麼在版面中的區域應該能夠像在IE6中同樣正常顯示。
代碼示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#box {
/*父元素佈局屬性*/
width：100px;
height：100px;
border：double red 2px;
}
#sub_content {
/*子元素佈局屬性*/
width：200px;
height：200px;
marign-top：50px;
margin-left：50px;
border：thin dashed blue;
}
</style>
</head>
<body>
<div id="sub_content">內容</div>
</body>
</html>
具體詳解：
溢出是一種方法。用來描述當一個塊元素的內容超出父元素時，這些內容是否被省略。默認是可見的，可能顯示在父元素之外的地方。
IE7之前的版本不支持這種方法，父元素總會自動調整自身大小來適應超出本身範圍的子元素。
- 1. CSS兼容處理
- 2. CSS 兼容處理
- 3. JS CSS兼容性處理
- 4. css兼容處理-hack
- 5. CSS兼容處理（二）
- 6. CSS的兼容性與BUG處理
- 7. webpack 學習10 ,css 兼容性處理
- 8. React+Webpack css語法兼容處理
- 9. IE8的相關兼容
- 10. 關於html+css兼容
- 更多相關文章...
- • XML 相關技術 - XML 教程
- • 錯誤處理 - RUST 教程
- • NewSQL-TiDB相關
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS兼容處理
- 2. CSS 兼容處理
- 3. JS CSS兼容性處理
- 4. css兼容處理-hack
- 5. CSS兼容處理（二）
- 6. CSS的兼容性與BUG處理
- 7. webpack 學習10 ,css 兼容性處理
- 8. React+Webpack css語法兼容處理
- 9. IE8的相關兼容
- 10. 關於html+css兼容