記錄IE67下常見的問題
1、H5標籤兼容
H5的新加入的標籤在IE67下無用
解決辦法:檢測是否有這個標籤, 如沒有則自己定義一個標籤,但要注意自定義標籤默認是內聯元素,沒有寬和高
現在有成熟的js插件可以解決這個兼容性問題
<script>
document.createElement("header");
document.createElement("section");
document.createElement("footer");
</script>
<style>
header{
width: 200px;
height: 200px;
display: block;
background-color: red;
}
section{
width: 150px;
height: 150px;
display: block;
background-color: yellow;
}
footer{
width: 100px;
height: 100px;
display: block;
background-color: blue;
}
</style>
<body>
<header>header</header>
<section>section</section>
<footer>footer</footer>
</body>
2、元素浮動之後
能設置寬度的話就給元素加寬度,如果需要寬度把內容撐開,就給它裏面的塊元素加上浮動,外層元素清除浮動(overflow:hidden;)清除浮動後外層元素就會有高度
在IE中:浮動元素中增加塊元素,兩個元素會變成兩行
原因:浮動和塊元素的display:block衝突
解決方案:塊元素中加入float屬性,使其浮動
3、第一塊元素浮動,第二塊元素加margin值等於第一塊元素的寬度
IE6中會有間隙問題
解決方案:第二塊也用浮動進行佈局
4、IE6下子元素超過父級寬高,會把父級的寬高撐開
其他瀏覽器中,父級會包不住子元素
解決方案:不建議子元素的寬高超過父級
5、p包含塊元素的嵌套規則
在其他瀏覽器中,不允許p包含div元素
p、td、h1~n 標籤不能嵌套塊元素
6、margin兼容性
margin-top會傳遞
上下margin疊壓
margin-top解決方案:觸發BFC和haslayout(overflow:hidden;zoom:1;)
上下margin疊壓:觸發條件:同級元素有margin時,上下元素的margin-bottom和margin-top會疊壓。
解決方案:避免觸發條件,改用同一方向的margin,如都設置margin-bottom。
BFC:塊格式化上下文(Block Formatting Context,BFC)
是Web頁面的可視化CSS渲染的一部分,是佈局過程中生成塊級盒子的區域,也是浮動元素與其他元素的交互限定區域。
塊格式化上下文對浮動定位(參見 float)與清除浮動(參見
clear)都很重要。浮動定位和清除浮動時只會應用於同一個BFC內的元素。浮動不會影響其它BFC中元素的佈局,而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距摺疊(Margin
collapsing)也只會發生在屬於同一BFC的塊級元素之間。