1200字范文 > WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【01】

WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【01】

时间：2022-05-03 07:47:34

#兼容问题目录

1、IE6下怪异盒模型

2、IE6下最小高度问题

3、IE6下不支持1px的点线

4、IE6下内容会把父级的高度撑开

5、IE6下只支持给a标签添加伪类

6、IE67下不支持给块标签加display:inline-block

7、IE8以及IE8以前的浏览器都不支持opacity

后续兼容性问题处理链接地址：

/baidu_37107022/article/details/71973570

/baidu_37107022/article/details/71977053

#1、IE6下怪异盒模型

在标准模式下的盒模型，

盒子总宽度/高度=width/height+padding+border+margin

在怪异模式下的盒模型，

盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

解决办法

在css3中有一个属性box-sizing来处理是用何种模型进行解析。

box-sizing有两个值一个是content-box，另一个是border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

代码演示

<html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;border: 10px solid #000;padding: 10px;background: red;}</style></head><body><div>123</div></body></html>

什么是盒模型链接：/baidu_37107022/article/details/71272900

#2、IE6下最小高度问题

解决办法

1、overflow:hidden 推荐

2、font-size: 0;

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{height: 1px;background: red;/*font-size: 0;*/}</style></head><body><div></div></body></html>

#3、IE6下不支持1px的点线

解决办法：

IE6不支持一像素的点划线，用背景图代替

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 500px;height: 100px;border: 1px dotted #f00;}</style></head><body><div></div></body></html>

#4、IE6下内容会把父级的高度撑开

解决办法

overflow: hidden;

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 200px;border: 1px solid #000;overflow: hidden;}</style></head><body><div>这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊</div></body></html>

#5、IE6下只支持给a标签添加伪类

IE6不支持除了a标签以外标签的伪类—无法解决

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>a:hover{color: #f00;}div{width: 100px;height: 100px;background: red;}div:hover{background: green;}</style></head><body><a href="#">kaivon</a><div></div></body></html>

#6、IE67下不支持给块标签加display:inline-block

无法解决

**根本原因：**IE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>span,div{width: 100px;height: 100px;background: red;display: inline-block;}</style></head><body><div>kaivon1</div><div>kaivon2</div><span>kaivon1</span><span>kaivon2</span></body></html>

普通浏览器中效果

IE7中效果

#7、IE8以及IE8以前的浏览器都不支持opacity

解决办法

用filter

代码演示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;background: red;opacity: 0.5;filter:alpha(opacity=50);}</style></head><body><div>kaivon</div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。