美文网首页
关于前端开发过程中浏览器部分兼容问题

关于前端开发过程中浏览器部分兼容问题

作者: 时不我与_ | 来源:发表于2019-03-27 22:23 被阅读0次

关于前端开发过程中浏览器兼容问题

IE6常见CSS解析BUG以及Hack解决方法

a) 默认高度:

  1. 在IE6以及以下版本中,部分块元素拥有默认高度(低于18px)

  2. Hack1:给元素添加声明:font-size:0;

  3. Hack2:给元素添加声明:overflow:hidden

b) 图片间隙:

  1. Div中的图片间隙(该bug出现在IE6以及更低版本中)

  2. 描述:在块元素中插入图片时,有时图片会将元素下方撑大三个像素;

  3. Hack:将<img>转化为块状元素,给<img>添加声明:display:block;

c) 双倍浮向(双倍边距):

  1. 描述:当IE6以及更低版本浏览器在解析浮动元素的时候,会错误的把浮向边的边界加倍显示。

  2. Hack:给浮动元素添加声明:display:inline;

d) 表单元素行高不一致(IE,MOZ,C,O,S)

  1. 描述:表单元素行高对齐方式不一致;

  2. Hack:给表单元素添加声明:float:left;

e) 按钮元素默认大小及样式不一致;

  1. Hack1:统一大小以及样式/(用a标记模拟)

  2. 如果这个按钮是一个图片,直接把图片作为按钮的背景图即可

f) 百分比bug

  1. 描述:在IE6以及以下版本中在解析百分比时,会按照四舍五入方式计算,从而导致50%加50%大于100%的情况。

  2. Hack:给右边的浮动元素添加声明:clear:right;意思:清除右浮动。

  3. Clear:left:清除左浮动

  4. Clear:both:清除两边的浮动。

g) 鼠标指针bug

  1. 如统一某元素鼠标指针形状为手状态,应添加声明:cursor:pointer;

h) 透明属性:

  1. IE浏览器写法:filter:alpha(opacity=数值);取值范围:1-100(IE8以下)

  2. 兼容其他浏览器的写法:opacity:数值(数值的取值范围0-1,0.1,0.2,0.3----,0.9)

i) 父元素里面有块元素,如果给子元素添加margin-top,父元素会下来

  1. Hack1:给父元素添加overflow:hidden;

  2. Hack2:给子元素添加float

  3. 给父元素加边框

统计了大概一部分的兼容问题,基本上都是兼容IE的较多,但是其实现在很多公司已经不再兼容IE了,也是仅供参考了解一下,毕竟IE作为windows强制绑定的浏览器,用户基数也是比较大的。

相关文章

  • 关于前端开发过程中浏览器部分兼容问题

    关于前端开发过程中浏览器兼容问题 IE6常见CSS解析BUG以及Hack解决方法 a) 默认高度: 在IE6以及...

  • 前端开发-浏览器兼容的坑

    前端开发-浏览器兼容的坑 最近开始整理前端开发的浏览器兼容问题,初次发版内容少一点,后续会持续更新内容~ 一、JS...

  • WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

    index WEB前端开发人员须知的常见浏览器兼容问题及解决技巧 __yzp 为什么会有兼容问题? 由于市场上浏览...

  • 浏览器能力检测

    浏览器的兼容问题是前端开发避不开的一个问题,我们在处理浏览器兼容问题时,可以采取第三方插件来做兼容,或者是浏览器能...

  • CSS浏览器兼容

    对于老前端来说最头疼的事情之一那就是浏览器的兼容问题,掉的头发有一部分就有他的功劳,为什么会有浏览器兼容问题呢? ...

  • 一文看透浏览器架构

    本文由云+社区发表作者:廖彩明 在从事前端开发过程中,浏览器作为最重要的开发环境,浏览器基础是是前端开发人员必须掌...

  • css样式浏览器兼容问题总结

    浏览器兼容问题往往是前端开发人员最为头疼的问题,问题的原因是不同的浏览器对同一段代码有不同的解析,造成页面...

  • JS解决浏览器一些兼容问题

    在开发的过程中,我们就经常会遇到浏览器的兼容问题,因为我们不知道用户是用什么版本的浏览器,对于不同的浏览器,对一些...

  • 前端浏览器兼容问题总结

    前端浏览器兼容问题总结-scy_coder的文章-掘金[https://juejin.cn/post/684490...

  • 【转】阮一峰:前端开发的历史和趋势

    原文地址:前端开发的历史和趋势作者:阮一峰 前端开发的历史和趋势 什么是前端 前端:针对浏览器的开发,代码在浏览器...

网友评论

      本文标题:关于前端开发过程中浏览器部分兼容问题

      本文链接:https://www.haomeiwen.com/subject/fjsxbqtx.html