IE浏览器兼容问题小结

Posted 2020-11-25 lanselove

IE浏览器兼容问题小结

li空出4px（IE6、7）

描述

li的子元素浮动而li不浮动时，在li的下方会空出4px。li的子元素绝对定位时也会产生空白。
原因：li触发了haslayout，比如设置高度

Q: 只有li标签会这样吗？
S: 是的。其他元素都不会产生，如果都替换成div来实现就没有问题

解法

使用列表时一般都需要给li设置高度，所以不好从触发bug的因素下手

• 在li上设置vertical-align: bottom;或者vertical-align: top;
• 浮动的情况下可以给li也设置浮动*float: left

引申

hasLayout 介绍，以及其触发条件
https://blog.csdn.net/dl429/article/details/40778815

浮动双边距（IE6）

描述

当一个块级元素外边距的方向与浮动方向相同时就会出现双边距的情况【参考: https://www.jianshu.com/p/464d2f1586e0, https://zhidao.baidu.com/question/1823227618900206348.html】
原因: https://jingyan.baidu.com/article/0bc808fc4ab5a31bd585b979.html
我觉得是IE浏览器解析css的设计有缺陷，margin设置为数值时参照的是临近元素，而这个块级元素刚好夹在正常文档流和浮动文档流之中，于是块级文档流已经做了一次参照，浮动触发haslayout又计算了一次。（ps: 浮动会使得元素 ‘display‘ 特性计算为 ‘block‘ 或者 ‘table‘）

Q: 只有块级元素会这样吗？
S: 是的。内联元素和其他元素不会产生
Q: 为什么同一行中间的浮动元素不会产生呢？
S: 我觉得是中间的元素没有夹在正常文档流和浮动文档流之间，不会有计算Bug

解法

既然它是三个条件同时满足才会产生，那破除其中一个即可

• 设置元素类型为内联: _display: inline
• 在父元素上设置内边距padding替代margin
• 不使用浮动布局，比如改用定位

引申

请你介绍一下双边距重叠触发的条件是什么？折叠的结果是什么？
https://www.nowcoder.com/questionTerminal/0138f0442baf4348895af7a53c8a609c
同一个BFC（块级格式化上下文）内部，相邻的两个盒子上下外边距（margin）会发生重叠。重叠之后的结果是这两个盒子相邻部分的垂直外边距取两者中较大的那个数值。【竖向排版的意义只在于留白，所以没必要上下分别设置边距】

浮动元素可以设置margin吗
https://zhidao.baidu.com/question/711408622812698165.html
margin是设置元素与元素之间的间距的；
块元素就是会占一行的元素，行内元素是跟据内容的多少来占位置的，而浮动元素是也是跟据内容的多少来占位置的，但是浮动之后就会变成块元素了，并且会从正常的文档流中删除它的位置；
块元素可以设置margin的上、右、下、左间距，行内容只有margin的左和右会生效，浮动元素的margin跟块元素一样

html的div的margin属性是相对什么计算的?
https://zhidao.baidu.com/question/558613528726229172.html
盒子模型的这两个属性有根本性区别，比如设一个div的padding属性，它的子标签元素会相应移动。而设置它的margin属性，这个div整个标签会依据兄弟元素或父元素移动。【如果margin是百分比，则是相对于父元素的宽度来计算的，就算是top和bottom也是width的百分比，直接原因是相对父元素的高度计算会陷入死循环，根本原因是网页的主流习惯是横向排版，高度是不确定的】

其他

1) 图片无法根据css设置的宽高缩放（IE6、7）

设置*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="scale")

2) 透明度opacity不支持（IE6、7）

设置*filter:alpha(opacity:0.8)

3) rgba不支持（IE6、7）

例如background-color:rgba(0,0,0,0.5)对应设置*filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000)
数值转换表：

属性	数值	数值	数值	数值	数值	数值	数值	数值	数值
rgba	0.1	0.2	0.3	0.4	0.5	0.6	0.7	0.8	0.9
filter	19	33	4c	66	7f	99	b2	c8	e5

参考: https://www.cnblogs.com/newh5/p/5660763.html

4) 清除浮动失效（IE6、7）

IE6、7不支持after伪元素，可以考虑用一个空的div专门清除浮动顺便充当留白间距，或者使容器触发haslayout来包住浮动的内容，zoom最合适

.clear::after {display:block;content:'';clear:both;}  /* 主流浏览器 */
.clearDiv {height: 10px;_overflow:hidden;clear:both;}  /* 兼容方案1 */
.box {*zoom:1;}  /* 兼容方案2 */

5) 输入类型的表单控件上下空出1px（IE6、7）

给input加浮动如*float:left

6) 输入类型的表单控件使用border:none重置border无效（IE6、7）

设置*border:0或者重置input的背景，如input{background:#fff;}

7) inline-block设置text-indent会使元素偏移（IE6、7）

用padding代替text-indent或者设置display:block
ps: input、select、button、textarea的display皆默认为inline-block

8) 图片下方间隙（所有浏览器）

原因：图片默认根据基线对齐（参考: https://www.jianshu.com/p/7b7ae3cc2a72）
解法：间隙具体多少像素受line-height和font-size影响

• 设置底线对齐vertical-align:bottom
• 图片块状化display:block（块状元素不存在基线对齐）

9) 非法嵌套的标签会被异常处理（IE6、7）

例如ul>li*4+p在标准浏览器下面p标签和li为兄弟关系，IE6、7下p标签会被li吃掉，变为父子关系

10) 伪类支持有限（IE6、7）

在IE6下，只支持link，hover，visited，active这四个伪类，并且只支持添加给a标签；
在IE7下，只支持link，hover，visited，active这四个伪类，但可以添加给其它标签；

11) 最小高度问题（IE6）

高度小于20px会解析为20px，设置_overflow:hidden

12) png图片不透明（IE6）

js打补丁或者设置_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");

---

阅读资料

ie下面兼容性问题的一些总结
https://www.cnblogs.com/dothin/p/4979521.html
大家是如何处理IE6兼容性的？【面试回答】
https://segmentfault.com/q/1010000000347237
1、面向客户则引导他们升级浏览器版本，面向大众则在页面上提示用户使用主流浏览器访问或者建议他们升级浏览器
2、针对主流浏览器做完再去测试，标准是布局没有错位，排版没有凌乱，效果没有明显差别就行
3、css使用hack单独补丁，js则利用html条件注释识别IE引入兼容代码
模拟和测试其他浏览器
https://developers.google.com/web/tools/chrome-devtools/device-mode/testing-other-browsers?hl=zh-cn