網(wǎng)頁兼容性

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

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

記錄IE67下常見的問題

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

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

 
    

header
section
footer

2、元素浮動之后

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

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

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

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

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

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

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

6、margin兼容性

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117457.html

相關(guān)文章

談一談瀏覽器兼容問題

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

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

摘要：瀏覽器兼容產(chǎn)生的原因因為不同瀏覽器使用內(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 評論0 收藏0
web前端關(guān)于瀏覽器兼容的一些知識和問題解決

摘要：瀏覽器兼容產(chǎn)生的原因因為不同瀏覽器使用內(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 評論0 收藏0
web前端關(guān)于瀏覽器兼容的一些知識和問題解決

摘要：瀏覽器兼容產(chǎn)生的原因因為不同瀏覽器使用內(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 評論0 收藏0
你們要的HTML布局技巧：如何規(guī)范搭建網(wǎng)頁架構(gòu)？

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

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

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

KaltZK 2019-08-02 14:28 評論0 收藏0