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

瀏覽器兼容之旅第三站:IE常見Bug總結(jié)及修復(fù)方法—part1( 四 )



復(fù)制代碼代碼如下:
.demo {
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden;
}

八、overflow:auto與position:relative的碰撞
這個Bug也稱作距出邊界的Bug,而這個Bug 只出現(xiàn)在 IE6 和 IE7 中,有兩個塊元素,元素設(shè)置了 overflow: auto;子元素設(shè)置 position:relative 并且其高度大于父元素,在 IE6 和 IE7 中會產(chǎn)生一個比較難看的 Bug,也就是子元素 塊不被隱藏會溢出父元素塊,而在 IE8 和 FF 還有 IE5.5 中又顯示是正常,我們先來看看這個例子的效 果:
HTML Markup

復(fù)制代碼代碼如下:
div id="wrap"
div id="subDiv" /div
/div

CSS Code

復(fù)制代碼代碼如下:
#wrap {
border: 1px solid red;
height: 150px;
width: 200px;
background: orange;
overflow: auto;
}
#subDiv {
border: 1px dotted blue;
background: lime;
height: 200px;
width: 150px;
position: relative;
}

瀏覽器中的效果

瀏覽器兼容之旅第三站:IE常見Bug總結(jié)及修復(fù)方法—part1



要解決這個難看的Bug 我們只要在父元素中也設(shè)置一個position:relative;屬性,就會使 IE6 和 IE7 回復(fù)到正常狀態(tài) 。

復(fù)制代碼代碼如下:
#wrap {
border: 1px solid red;
height: 150px;
width: 200px;
background: orange;
overflow: auto;
position: relative;
}

這是一個overflow 在IE7~IE6 的bug,不單單只取值auto 會出現(xiàn)這個Bug,就是你設(shè)置overflow: hidden 也會出現(xiàn)這個Bug 。解決方法也是只要在父元素中加入一個position: relative;就 OK 了 。

九、浮動層錯位
當(dāng)內(nèi)容超出外包容器定義的寬度時會導(dǎo)致浮動層錯位問題 。在 Firefox、IE7、IE8 及其他標(biāo)準(zhǔn)瀏覽 器里,超出的內(nèi)容僅僅只是超出邊緣;但在 IE6 中容器會忽 視定義的 width 值,寬度會錯誤地隨內(nèi) 容寬度增長而增長 。如果在這個浮動元素之后還跟著一個 浮動元素,那么就會導(dǎo)致錯位問題
HTML Markup:

復(fù)制代碼代碼如下:
div id="container"
div id="left" http://net.tutsplus.com//div
div id="right" /div
/div

CSS Code

復(fù)制代碼代碼如下:
#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
}
#left,
#right{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;
}

效果圖

瀏覽器兼容之旅第三站:IE常見Bug總結(jié)及修復(fù)方法—part1



解決這樣的bug沒有什么好方法,只能在元素中加上overflow:hidden,將多出來的內(nèi)容直接切掉,如:

復(fù)制代碼代碼如下:
#left { overflow: hidden; }

雖然可以使用 overflow:hidden;或 overflow:scroll;來 修正,但 hidden 容易導(dǎo)致其他一些問 題,scroll 會 破壞設(shè)計 。最好是使用固定布局或者是使用好寬度

十、IE6下躲貓貓
這個奇怪的 Bug 是 IE6 及其以下版本的,為什么起這樣的一個名稱,因為在某些情況下文本看起 來消失了,重新刷新隱藏的部分才會再度出現(xiàn) 。出現(xiàn)這個 Bug 的條件是:一個撐破了容器浮動元素后 面緊跟著一些非浮動元素,并且非浮動元素中有一些定義了:hover 的鏈接,那么在 IE6 及其以下版中, 當(dāng)鏈接在懸浮狀態(tài)下就會觸發(fā)這個奇怪而又無耐的Bug 。

解決這個Bug最好的方法就是清除浮動,因為他是由于浮動才產(chǎn)生的Bug 。有關(guān)于清除浮動的方法,大家可以參考《Clear Float 》 。
上面主要搜集了10種Bug,可以說這幾種都是經(jīng)典的Bug 。希望這幾種能給你今后的工作帶來方便,讓你在Bug還沒出現(xiàn)之前就避免他的發(fā)生 。那么第三站我們也要說ByeBye了,如果你天天需要面對這個討厭的IE,小生建議你靜下心來細(xì)細(xì)讀完 。對你會有所幫助的 。如果你有更好的建議,也記得告訴我 ?;蛘咴谠u論中給我留言 。:)

推薦閱讀