日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

CSS HACK收集：關于IE6/FF/google等瀏覽器hack的方法詳細( 二 )

云知道


12、清除浮動
如果你想用div(或其他容器)包裹一個浮動的元素，你會發(fā)現(xiàn)必須給div(容器)定義明確的height、width、overflow之中一個屬性（除了auto值）才能將浮動元素嚴實地包裹 。
#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background:#00F;}
#floated2 {float:right; height:400px; width:200px; background:#F0F;}
13、浮動層錯位
當內(nèi)容超出外包容器定義的寬度時，在IE6中容器會忽視定義的width值，寬度會錯誤地隨內(nèi)容寬度增長而增長 。
浮動層錯位問題在IE6下沒有真正讓人滿意的解決方法，雖然可以使用overflow:hidden;或overflow:scroll;來修正，但hidden容易導致其他一些問題，scroll會破壞設計；JavaScript也沒法很好地解決這個問題 。所以建議是一定要在布局上避免這個問題發(fā)生，使用一個固定的布局或者控制好內(nèi)容的寬度（給內(nèi)層加width） 。
14、躲貓貓bug
在IE6和IE7下，躲貓貓bug是一個非常惱人的問題 。一個撐破了容器的浮動元素，如果在他之后有不浮動的內(nèi)容，并且有一些定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發(fā)躲貓貓 。
解決方法很簡單：
1.在（那個未浮動的）內(nèi)容之后添加一個span style=clear: both;
2.觸發(fā)包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;
15、絕對定位元素的1像素間距bug
IE6下的這個錯誤是由于進位處理誤差造成（IE7已修復），當絕對定位元素的父元素高或?qū)挒槠鏀?shù)時，bottom和right會產(chǎn)生錯誤 。唯一的解決辦法就是給父元素定義明確的高寬值，但對于液態(tài)布局沒有完美的解決方法 。
16、3像素間距bug
在IE6中，當文本(或無浮動元素)跟在一個浮動的元素之后，文本和這個浮動元素之間會多出3像素的間隔 。
給浮動層添加 display:inline 和 -3px 負值margin
給中間的內(nèi)容層定義 margin-right 以糾正-3px
17、IE下z-index的bug
在IE瀏覽器中，定位元素的z-index層級是相對于各自的父級容器，所以會導致z-index出現(xiàn)錯誤的表現(xiàn) 。解決方法是給其父級元素定義z-index，有些情況下還需要定義position:relative 。
18、Overflow Bug
在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素 。解決方法就是給外包容器.wrap加上position:relative; 。
19、橫向列表寬度bug
如果你使用float:left;把li橫向擺列，并且li內(nèi)包含的a（或其他）觸發(fā)了hasLayout，在IE6下就會有錯誤的表現(xiàn) 。解決方法很簡單，只需要給a定義同樣的float:left;即可 。
20、列表階梯bug
列表階梯bug通常會在給li的子元素a使用float:left;時觸發(fā)，我們本意是要做一個橫向的列表(通常是導航欄)，但IE卻可能呈現(xiàn)出垂直的或者階梯狀 。解決辦法就是給li定義float:left;而非子元素a，或者給li定義display:inline;也可以解決 。
21、垂直列表間隙bug
當我們使用li 包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條列表元素（li）之間添加空隙 。
解決方法：把aflaot并且清除float來解決這個問題；另外一個辦法就是觸發(fā)a的hasLayout（如定義高寬、使用zoom:1;）；也可以給li 定義display:inline;來解決此問題；另外還有一個極有趣的方法，給包含的文本末尾添加一個空格 。
22、IE6中的:hover
在IE6中，除了(需要有href屬性)才能觸發(fā):hover行為，這妨礙了我們實現(xiàn)許多鼠標觸碰效果，但還是有一些法子是可以解決它的 。最好是不要用:hover來實現(xiàn)重要的功能，僅僅只用它來強化效果 。
23、IE6調(diào)整窗口大小的 Bug
當把body居中放置，改變IE瀏覽器大小的時候，任何在body里面的相對定位元素都會固定不動了 。解決辦法：給body定義position:relative;就行了 。

推薦閱讀