美文网首页
前端兼容性问题整理

前端兼容性问题整理

作者: minifayer | 来源:发表于2017-03-17 12:03 被阅读0次

1、*ie6下子级宽度会撑开父级设置好的宽度。

方案:将子级元素的宽度设置为小于等于父级元素的宽度盒模型的计算一定要准确,否则在IE下会出现问题;

2、*IE6中,元素浮动:如果元素需要宽度进行撑开,需要给里面的子级元素都添加浮动才可以

3、*IE6的最小高度问题,

4、*IE6 下不支持1px的 dotted 边框样式切背景平铺

5、*IE6/7/8下,父级有边框的时候,子级的margin会失效,

方案:在IE下的大部分兼容性问题都是因为hasLayout属性触发的问题,尽量触发hasLayout可以减少IE的问题

hasLayout只在IE6/7/8中有,zoom 界面加载初始赔率,触发IE 中haslayout

6、在IE6下,!块元素有浮动并且横向有margin 的时候,横向的margin会扩大两倍!

方案:给块元素设置display:inline;

7、ie6/7下,li本身没有浮动,li里面的内容有浮动。li下会产生一个间隙

方案:给li设置浮动:float:left;或vertical-align:top/middle/bottom;

8、ie6下,最小高度的BUG和li的间隙问题共存的时候,使用vertical-align:top/middle/bottom;是无效的

方案:必须使用float:left;

9、在ie6下 的文字溢出

子元素的宽度和父级的宽度如果相差小于3px的时候,两个浮动元素中间有注释或者内联元素的时候,就会出现文字溢出,内联元素越多,溢出越多

方案:用块元素标签把注释或者内联元素包裹起来

10、在IE6下,当浮动元素和绝对定位元素是兄弟的时候,绝对定位会失效

方案:不让浮动元素和绝对定位是兄弟,  可以用div元素嵌套

11、在IE6/7下,子级元素有相对定位,父级overflow包不住子级元素

方案:给父级设置相对定位

12、ie6下,如果绝对定位的父级宽和高是奇数的时候,子级元素的right和bottom会有1像素的偏差

方案:跟美工商量,换偶数

13、ie6没有固定定位,只能用JS去模拟

14、ie不认识opacity

用:filter:alpha(opacity=0~100);

15、ie6/7下,输入表单控件上下会有1px的间隙

方案:给input加浮动

16、ie6不支持透明度的方式

方案:通过JS

17、<!--注释条件语句-->

<!--[if ie]>

我是IE

<![end if]-->

18、css hack

相关文章

  • 前端兼容性问题整理

    1、*ie6下子级宽度会撑开父级设置好的宽度。 方案:将子级元素的宽度设置为小于等于父级元素的宽度盒模型的计算一定...

  • 前端兼容性问题整理合集

    纵有疾风起,人生不言弃。 -- 《起风了》 1:Polyfill/Polyfiller 我把它叫做垫片儿,它是一个...

  • Ajax Axios

    关于Ajax兼容性问题 前端原生Ajax(get方式),后端使用node.js 前后端代码: 前端原生Ajax(p...

  • 讨厌的IE6

    IE6的兼容性问题一直都是前端工程师的恶梦,为了早早脱离这种困境,小小的整理了一些相关兼容性的知识,感兴趣的朋友可...

  • 减少浏览器兼容性问题

    做为一个前端工程师,不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。 确定运行环...

  • C3-目录→兼容性

    兼容性前端的三个层级的语言都有兼容性问题HTML section,footer,video等,如果浏览器不能识别某...

  • 面试题__8__未知宽高的img如何在容器里水平垂直居中

    方案1: 没有兼容性问题 方案2:有兼容性问题

  • css隐藏overflow:scroll出现的滚动条

    没有兼容性问题!没有兼容性问题!没有兼容性问题! 假设,list_container是需要内容滚动的,如果用css...

  • 如何使用Node爬虫利器Puppteer进行自动化测试

    文:华为云DevCloud 乐少 1、背景 1.1 前端自动化测试较少 前端浏览器众多导致页面兼容性问题比较多,另...

  • 前端兼容性问题总结

    HTML 篇 样式兼容性问题 怪异模式 怪异模式是没有遵守 W3C 规范的一种兼容模式,其中的 width 是包括...

网友评论

      本文标题:前端兼容性问题整理

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