網頁兼容性

Donne 發布于2019-08-30 15:56 / 3016人閱讀

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

記錄IE67下常見的問題

1、H5標簽兼容

H5的新加入的標簽在IE67下無用
解決辦法：檢測是否有這個標簽，如沒有則自己定義一個標簽，但要注意自定義標簽默認是內聯元素，沒有寬和高
現在有成熟的js插件可以解決這個兼容性問題

 
    

header
section
footer

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的塊級元素之間。

云服務器 GPU云服務器網頁兼容性測試工具網頁兼容 ietester 服務器網頁兼容問題兼容性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117457.html

談一談瀏覽器兼容問題

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

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

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

daydream 2019-08-21 17:46 評論0 收藏0
web前端關于瀏覽器兼容的一些知識和問題解決

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

caikeal 2019-08-01 18:04 評論0 收藏0
web前端關于瀏覽器兼容的一些知識和問題解決

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

X1nFLY 2019-08-29 13:53 評論0 收藏0
你們要的HTML布局技巧：如何規范搭建網頁架構？

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

yvonne 2019-08-30 15:56 評論0 收藏0
你們要的HTML布局技巧：如何規范搭建網頁架構？

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

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