網頁兼容性

時間 2019-11-10

標籤網頁兼容性欄目 HTML 简体版

原文原文鏈接

記錄IE67下常見的問題瀏覽器

一、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>

二、元素浮動以後

能設置寬度的話就給元素加寬度，若是須要寬度把內容撐開，就給它裏面的塊元素加上浮動，外層元素清除浮動（overflow:hidden；）清除浮動後外層元素就會有高度
在IE中：浮動元素中增長塊元素，兩個元素會變成兩行
緣由：浮動和塊元素的display：block衝突
解決方案：塊元素中加入float屬性，使其浮動插件

三、第一塊元素浮動，第二塊元素加margin值等於第一塊元素的寬度

IE6中會有間隙問題
解決方案：第二塊也用浮動進行佈局code

四、IE6下子元素超過父級寬高，會把父級的寬高撐開

其餘瀏覽器中，父級會包不住子元素
解決方案：不建議子元素的寬高超過父級orm

五、p包含塊元素的嵌套規則

在其餘瀏覽器中，不容許p包含div元素
p、td、h1~n 標籤不能嵌套塊元素ip

六、margin兼容性

margin-top會傳遞
上下margin疊壓
margin-top解決方案：觸發BFC和haslayout（overflow:hidden;zoom:1;）
上下margin疊壓：觸發條件：同級元素有margin時，上下元素的margin-bottom和margin-top會疊壓。
解決方案：避免觸發條件，改用同一方向的margin，如都設置margin-bottom。io

BFC：塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域。塊格式化上下文對浮動定位（參見 float）與清除浮動（參見 clear）都很重要。浮動定位和清除浮動時只會應用於同一個BFC內的元素。浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距摺疊（Margin collapsing）也只會發生在屬於同一BFC的塊級元素之間。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。