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

  1. 首頁(yè) > 云知道 > >

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

云知道



三、設(shè)置元素的最小高度和最小寬度
在Web頁(yè)面設(shè)計(jì)中，有時(shí)為了達(dá)到元素的的統(tǒng)一渲染的風(fēng)格，我們有時(shí)需要使用min-height和min-width來(lái)控制元素的最小高度和最小寬度值 。在別的瀏覽器都運(yùn)行正常，可唯獨(dú)這個(gè)IE6不識(shí)別人家 。因此在使用min-height和min-width時(shí)，為了達(dá)到效果一致，我們要針對(duì)IE6另作處理 。其中min-height解決起來(lái)相當(dāng)簡(jiǎn)單，但是min-width在IE6下要順利解決就有點(diǎn)麻煩（關(guān)于IE6下的min-width放到后面一起探討）這里我們主要來(lái)看min-height的解決辦法 。
采用!important方法修復(fù)
第一種方法采用的是!important來(lái)解決，讓min-height在IE6下能正常工作，具體代碼如下：

復(fù)制代碼代碼如下:
.demo {
min-height: 100px;
height: auto !important;/*現(xiàn)代瀏覽器下，內(nèi)容高度超過(guò)100px時(shí)自動(dòng)獲得其高度*/
height: 100px;/*此值設(shè)置和min-height值一樣，因?yàn)镮E6下元素高度會(huì)根據(jù)內(nèi)容自己的高度而定，所以內(nèi)容高度低于min-height值時(shí)，為了達(dá)到min-height效果，需要給元素一個(gè)顯式的高度值*/
}

采用子選擇器方法來(lái)修復(fù)
大家都知道IE6是不支持子選擇器的，所以我們也可以使用這個(gè)方式來(lái)解決min-height在IE6下效果

復(fù)制代碼代碼如下:
.demo {
min-height: 100px;
height: 100px;
}
html body .demo {
height: auto;/*只有現(xiàn)代瀏覽器才能識(shí)別*/
}

四、塊元素水平居中
元素居中，大家都有碰到過(guò)，有時(shí)也有不少童鞋會(huì)問(wèn)，怎么我的div元素在IE6下不能居中呢？其實(shí)這個(gè)Bug并不是什么時(shí)候都會(huì)發(fā)生的，據(jù)我查閱相關(guān)資料和多次測(cè)試，這個(gè)Bug只會(huì)發(fā)生在IE6怪癖模式下，知道問(wèn)題出在什么地方，那解決起來(lái)不難了，最直接的辦法就是在你的頁(yè)面頭部記得加上Doctype 。有關(guān)于DOCTYPE聲明可以猛點(diǎn)這里查看 。下面我們就針對(duì)IE6的怪癖模式來(lái)解決這樣的Bug 。
CSS Code

復(fù)制代碼代碼如下:
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
}
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
}

產(chǎn)生的效果如圖所示

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



這主要是由于IE6的quirks模式不識(shí)別margin的auto屬性值，但還好，解決這個(gè)bug并不復(fù)雜 。只需要在居中元素的父元素中加上text-align:center；然后在居中元素中加上text-align:left重新讓元素文本左對(duì)齊

復(fù)制代碼代碼如下:
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
text-align: center;/*讓子元素在IE6的quirks模式實(shí)現(xiàn)水平居中*/
}
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
text-align: left;/*重置文本對(duì)齊方式，讓文本左對(duì)齊*/
}

當(dāng)然元素居中問(wèn)題是一個(gè)比較有意思的課題，如果你對(duì)這個(gè)感興趣也可以閱讀前面我整理的《CSS制作水平垂直居中對(duì)齊》一文，這樣你對(duì)元素的居中會(huì)有更深的了解 。
五、列表li的樓梯Bug
li在IE6下呈樓梯狀的效果，也可以算是IE6的一個(gè)經(jīng)典Bug了吧 。他通常發(fā)生在li中放置了一些元素內(nèi)容（比如說(shuō)a）而且對(duì)其進(jìn)行浮動(dòng)，但li本身不浮動(dòng)，此時(shí)在IE下就會(huì)有樓梯上了，具體先看下面的代碼：
HTML Markup

復(fù)制代碼代碼如下:
ul
lia _fcksavedurl=""#"" /a/li
lia /a/li
lia /a/li
/ul

CSS Code

復(fù)制代碼代碼如下:
ul {
list-style: none;
}
ul li a {

推薦閱讀