網頁相容性
記錄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的塊級元素之間。