网页兼容性

blair 发布于2019-08-02 14:24 / 468人阅读

摘要：块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。浮动定位和清除浮动时只会应用于同一个内的元素。外边距折叠也只会发生在属于同一的块级元素之间。

记录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 服务器网页兼容问题兼容性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53787.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