網(wǎng)頁兼容性

Donne 發(fā)布于2019-08-30 15:56 / 3030人閱讀

摘要：塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)內(nèi)的元素。外邊距折疊也只會(huì)發(fā)生在屬于同一的塊級(jí)元素之間。

記錄IE67下常見的問題

1、H5標(biāo)簽兼容

H5的新加入的標(biāo)簽在IE67下無用
解決辦法：檢測(cè)是否有這個(gè)標(biāo)簽，如沒有則自己定義一個(gè)標(biāo)簽，但要注意自定義標(biāo)簽?zāi)J(rèn)是內(nèi)聯(lián)元素，沒有寬和高
現(xiàn)在有成熟的js插件可以解決這個(gè)兼容性問題

 
    

header
section
footer

2、元素浮動(dòng)之后

能設(shè)置寬度的話就給元素加寬度，如果需要寬度把內(nèi)容撐開，就給它里面的塊元素加上浮動(dòng)，外層元素清除浮動(dòng)（overflow:hidden；）清除浮動(dòng)后外層元素就會(huì)有高度
在IE中：浮動(dòng)元素中增加塊元素，兩個(gè)元素會(huì)變成兩行
原因：浮動(dòng)和塊元素的display：block沖突
解決方案：塊元素中加入float屬性，使其浮動(dòng)

3、第一塊元素浮動(dòng)，第二塊元素加margin值等于第一塊元素的寬度

IE6中會(huì)有間隙問題
解決方案：第二塊也用浮動(dòng)進(jìn)行布局

4、IE6下子元素超過父級(jí)寬高，會(huì)把父級(jí)的寬高撐開

其他瀏覽器中，父級(jí)會(huì)包不住子元素
解決方案：不建議子元素的寬高超過父級(jí)

5、p包含塊元素的嵌套規(guī)則

在其他瀏覽器中，不允許p包含div元素
p、td、h1~n 標(biāo)簽不能嵌套塊元素

6、margin兼容性

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

BFC：塊格式化上下文（Block Formatting Context，BFC）
是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。
塊格式化上下文對(duì)浮動(dòng)定位（參見 float）與清除浮動(dòng)（參見
clear）都很重要。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)BFC內(nèi)的元素。浮動(dòng)不會(huì)影響其它BFC中元素的布局，而清除浮動(dòng)只能清除同一BFC中在它前面的元素的浮動(dòng)。外邊距折疊（Margin
collapsing）也只會(huì)發(fā)生在屬于同一BFC的塊級(jí)元素之間。

GPU云服務(wù)器云服務(wù)器網(wǎng)頁兼容性測(cè)試工具網(wǎng)頁兼容 ietester 服務(wù)器網(wǎng)頁兼容問題兼容性

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117457.html

相關(guān)文章

談一談瀏覽器兼容問題

摘要：瀏覽器兼容問題什么是瀏覽器兼容所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。瀏覽器兼容問題 1、什么是瀏覽器兼容所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。 2、瀏覽器兼容產(chǎn)生的原因因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的HTML等網(wǎng)頁語言標(biāo)準(zhǔn)不同；以及用戶客戶端的環(huán)境不同（如...

wangzy2019 2019-08-20 19:06 評(píng)論0 收藏0
web前端關(guān)于瀏覽器兼容的一些知識(shí)和問題解決

摘要：瀏覽器兼容產(chǎn)生的原因因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的等網(wǎng)頁語言標(biāo)準(zhǔn)不同。很早以前搜索引擎優(yōu)化百度百度專門給技術(shù)人員提供優(yōu)化方案，是一本白皮書。被抓取的網(wǎng)頁被稱之為網(wǎng)頁快照。 showImg(https://segmentfault.com/img/bVY9Mu?w=383&h=194); 瀏覽器兼容為什么產(chǎn)生瀏覽器兼容，瀏覽器兼容問題什么是瀏覽器兼容；所謂的瀏覽器兼容性問題，是指...

daydream 2019-08-21 17:46 評(píng)論0 收藏0
web前端關(guān)于瀏覽器兼容的一些知識(shí)和問題解決

摘要：瀏覽器兼容產(chǎn)生的原因因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的等網(wǎng)頁語言標(biāo)準(zhǔn)不同。很早以前搜索引擎優(yōu)化百度百度專門給技術(shù)人員提供優(yōu)化方案，是一本白皮書。被抓取的網(wǎng)頁被稱之為網(wǎng)頁快照。 showImg(https://segmentfault.com/img/bVY9Mu?w=383&h=194); 瀏覽器兼容為什么產(chǎn)生瀏覽器兼容，瀏覽器兼容問題什么是瀏覽器兼容；所謂的瀏覽器兼容性問題，是指...

caikeal 2019-08-01 18:04 評(píng)論0 收藏0
web前端關(guān)于瀏覽器兼容的一些知識(shí)和問題解決

摘要：瀏覽器兼容產(chǎn)生的原因因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的等網(wǎng)頁語言標(biāo)準(zhǔn)不同。很早以前搜索引擎優(yōu)化百度百度專門給技術(shù)人員提供優(yōu)化方案，是一本白皮書。被抓取的網(wǎng)頁被稱之為網(wǎng)頁快照。 showImg(https://segmentfault.com/img/bVY9Mu?w=383&h=194); 瀏覽器兼容為什么產(chǎn)生瀏覽器兼容，瀏覽器兼容問題什么是瀏覽器兼容；所謂的瀏覽器兼容性問題，是指...

X1nFLY 2019-08-29 13:53 評(píng)論0 收藏0
你們要的HTML布局技巧：如何規(guī)范搭建網(wǎng)頁架構(gòu)？

摘要：主體內(nèi)容區(qū)域小米首頁下小米商城的主題內(nèi)容區(qū)域，也是整體網(wǎng)頁面積最廣的區(qū)塊實(shí)在不知道定主體內(nèi)容區(qū)塊時(shí)也可以根據(jù)面積比重來劃分，最大的那塊一定是主題中心，布局的重復(fù)性很高。單就深入了解布局規(guī)范都足夠說上一個(gè)月的，今天我就不論大范圍，挑選小米網(wǎng)站首頁的部分區(qū)塊布局來講解吧！下面是小米官網(wǎng)的首頁，很多人一看到這樣的網(wǎng)頁就傻眼，不知道咋弄，要么就隨性布局，要么就干看著，其實(shí)遇到問題首先一點(diǎn)就...

yvonne 2019-08-30 15:56 評(píng)論0 收藏0
你們要的HTML布局技巧：如何規(guī)范搭建網(wǎng)頁架構(gòu)？

摘要：主體內(nèi)容區(qū)域小米首頁下小米商城的主題內(nèi)容區(qū)域，也是整體網(wǎng)頁面積最廣的區(qū)塊實(shí)在不知道定主體內(nèi)容區(qū)塊時(shí)也可以根據(jù)面積比重來劃分，最大的那塊一定是主題中心，布局的重復(fù)性很高。單就深入了解布局規(guī)范都足夠說上一個(gè)月的，今天我就不論大范圍，挑選小米網(wǎng)站首頁的部分區(qū)塊布局來講解吧！下面是小米官網(wǎng)的首頁，很多人一看到這樣的網(wǎng)頁就傻眼，不知道咋弄，要么就隨性布局，要么就干看著，其實(shí)遇到問題首先一點(diǎn)就...

KaltZK 2019-08-02 14:28 評(píng)論0 收藏0