11.兼容性问题（上）-CSDN博客

本文链接：https://blog.csdn.net/u010567918/article/details/79279562

新增加

问题一：在IE6下，内容会撑开设置好的宽高

简介

1. 在IE6下，内容会撑开设置好的宽高。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{width:400px;}

.left{width:200px;height:200px;background:red;float:left;}

.right{width:200px;float:right;}

.div{width:180px;height:300px;background:green;padding:15px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

标准浏览器

IE6

总结

产生原因

1. 在IE6下，内容会撑开设置好的宽高。

2. "right"的子元素"div"实际宽度为210px（180+15+15），而父元素"right"的宽为200px，在标准浏览器下子元素"div"不会撑开父元素"right"，但在IE6下子元素宽度大于父元素宽度时，子元素是会撑开父元素的，所以在IE6下"div"会撑开"right"，出现兼容性。

解决办法

1. 上策：计算一定要精确，不要让内容的宽度超出我们设置的宽度。

2. 下策：为父元素添加样式属性“overflow:hidden”

a) 原代码：

i. .right{width:200px;float:right;}

b) 修改后：

i. .right{width:200px;float:right;overflow:hidden;}

问题二：在IE6下，内容会撑开设置好的宽高

简介

1. 在IE6下，内容会撑开设置好的宽高。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{width:400px;}

.left{background:red;float:left;}

.right{background:green;float:right;}

h3{margin:0;height:30px;}

</style>

</head>

<body>

<h3>左侧</h3>

</div>

<h3>右侧</h3>

</div>

</body>

</html>

效果

标准浏览器

IE6,7

总结

产生原因

1. 在IE6,7下，浮动元素的宽度自己不指定需要内容撑开，而内容又是块元素时，就会出现内容撑开整行。

解决办法

1. 在IE6,7下元素浮动，如果宽度需要内容撑开，就给里面的块元素内容都加浮动。

a) 原代码：h3{margin:0;height:30px;}

b) 修改后：h3{margin:0;height:30px;float:left;}

问题三：IE6,7下3像素的间隙bug

简介

1. IE6,7下3像素的间隙bug 。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.left{width:100px;height:200px;background:red;float:left;}

.right{width:200px;height:200px;background:green;margin-left:100px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

标准浏览器

IE6,7

总结

产生原因

1. 上面我们想“left”与“right”元素排在同一行，给“left”添加了浮动后，“right”就插上去了，然后我们给“right”元素添加了一个大小等于“left”元素宽度的左外边距，这样在标准浏览器下是OK的，但IE6,7下会出现3px的间隙bug。

解决办法

1. 在IE6,7下元素要想通过浮动排在同一行，就要给这一行元素都加浮动。

问题四：标签嵌套问题

简介

1. 标签嵌套问题，这是纯结构问题。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

p{width:200px;height:200px;background:red;}

</style>

</head>

<body>

<p>

<h3></h3>

</p>

</body>

</html>

效果

所有浏览器

总结

产生原因

1. p、dt、h标签里面不能嵌套块属性标签（如：“<p><div>块</div></p>” 是不行的）

解决办法

1. 没什么好说的，这是原则，要遵守原则书写代码即可。

2. 死守前面学过的标签嵌套规范。

回顾增强

1、IE6下最小高度

问题

描述

1. 在IE6下，元素的高度小于19px时，会被当成19px来处理。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{height:2px;background:red;}

</style>

</head>

<body>

</body>

</html>

效果

标准浏览器

IE6

解决

思路

一、上策：使用“overflow:hidden;”来处理。

二、下策：使用“font-size:0;”来处理，但最大能处理到2px，2px以下处理不了。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{height:2px;background:red;overflow:hidden;}

</style>

</head>

<body>

</body>

</html>

效果

所有浏览器

2、IE 6下点线边框

问题

描述

1. IE6下不支持边框(border)的1px的点线(dotted)边框，会显示成虚线。

a) 除了1px以外都是支持的如:2px、100px 。

2. 显示的基点不同

a) 谷歌浏览器基点是方形的。

b) IE浏览器和火狐浏览器下基点是圆点形的。

i. 虽然都是圆点但差距依然很大。

3. 四个拐角显示上差异也很大

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{width:200px;height:200px;border:20px dotted #000;}

</style>

</head>

<body>

</body>

</html>

效果

IE

谷歌

火狐

……

解决

总

1. 解决办法只有两点

a) 尽量躲避它。

b) 切背景平铺。

3、margin传递

问题

描述

1. 子元素的margin-top会传递给父元素，这是所有浏览器下都一样的。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{margin:0;}

.box{background:blue;}

.div{width:200px;height:200px;background:red;margin:100px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

所有浏览器

解决1

思路

1. 让父元素浮动

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{margin:0;}

.box{background:blue;float:left;}

.div{width:200px;height:200px;background:red;margin:100px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

所有浏览器

解决2（上）

思路

1. 使用“overflow:hidden;”。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{margin:0;}

.box{background:blue;overflow:hidden;}

.div{width:200px;height:200px;background:red;margin:100px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

标准浏览器

IE6

解决2（下）

思路

1. 从“解决2(上)”中可以看到标准浏览器的margin-top传递已经解决，但IE6下还是没有，其实IE6下的“haslayout”是可以解决这问题的，所以我们只需要使“haslayout”工作即可，可以使用“zoom:1”触发它工作。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{margin:0;}

.box{background:blue;overflow:hidden;zoom:1;}

.div{width:200px;height:200px;background:red;margin:100px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

所有浏览器

解决3（上）

思路

1. 当一个元素有边框（border）时，它的子元素的margin-top也不会传递到它身上。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{margin:0;}

.box{background:blue;border:1px solid #000;}

.div{width:200px;height:200px;background:red;margin:100px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

标准浏览器

IE6

解决3（下）

思路

1. 可以看到当父元素使用了边框后，子元素的margin-top的确不传递给父元素了，但在IE6下又出现了另一个问题，就是margin彻底失效了。

2. 其实解决IE6下出现的marding失效的新问题很简单，也是想办法触发“haslayout”工作。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{margin:0;}

.box{background:blue;border:1px solid #000;zoom:1;}

.div{width:200px;height:200px;background:red;margin:100px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

所有浏览器

总结

1. IE6,7下60%以上的问题都是“haslayout”引起的，所以在编码中，如果你要想很好的兼容IE6,7的话，尽量多考虑是否触发“haslayout”工作。

4、a标签伪类

问题

1. 在IE6,7下只支持a标签的四个伪类。

解决

1. 单纯的用CSS是解决不了的，可以使用js中的onmouseover等来解决。

2. 其实这些所有的关于IE6,7的兼容性问题可以不用再考虑了，它们已经基本上被市场淘汰了。

5、inline-block

问题

1. 在IE6,7下块标签是不支持“inline-block”的。

解决

1. 没有解决办法，只能避让。

6、双边距（浮动）

问题

1. 在IE6下，块元素有浮动和横向的margin值，横向的margin值会被放大两倍。

2. 双边距bug只出现在IE6下，并且是块元素和浮动以及横向的外边距同时存在下。

3. 双边距bug只出现在一行浮动元素中的第一个元素和最后一个元素，中间的浮动元素不会有双边距bug。

4. 双边距bug是跟margin值的方向有直接关系的

a) 对于“margin-left”一行左侧第一个元素会有双边距bug。

b) 对于“margin-right”一行右侧第一个元素会出现双边距bug。

解决

1. 直接用样式“display:inline”转成内嵌。

扩展

问题（浮动下的一个诡异问题）

1. 当一行子元素占有的宽度之和与父级的宽度相差3px，或者有不满行状态的时候，最后一行的下margin在IE6下会失效。

解决

1. 没有解决办法。

7、li间隙（浮动）

问题

1. 在IE6,7下，li元素本身没有浮动，但里面的内容有浮动，li元素下边就会产生一个间隙。

解决

1. 办法1

a) 给li元素也添加浮动，但这样li元素的宽度就由内容撑开了，有时就需要再为li元素指定宽度了。并且这样做的话，li元素的父元素可能还需要清浮动了。

2. 办法2 （推荐）

a) 给li元素添加垂直对齐方式“vertical-align:top;” 。

扩展

问题

1. 当IE6下最小高度问题（li元素高度小于19px时）和li元素下间隙问题共存时，我们为解决li元素间隙用“vertical-align:top;”，为解决最小高度用“overflow:hidden;”，这两个样式属性碰都一起会变成一个新的问题，这是我们不想的。

解决

1. 解决li元素间隙时不使用“vertical-align:top”，而用浮动。

8、IE6下的文字溢出bug （诡异）

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{margin:0;}

.box{width:400px;}

.left{float:left;}

.right{width:400px;float:left;} /* 如果将这里宽度改成397px就刚好没有问题了 */

</style>

</head>

<body>

<div class="right">↓len是一个大胖子</div>

</div>

</body>

</html>

效果

问题产生条件

1. 子元素的宽度和父元素的宽度相差小于3px。

2. 在两个浮动元素之间有注释或有内嵌元素。

a) 注释或内嵌元素越多，溢出的文字就越多。

解决办法

1. 办法一：将父级宽度调大一点。

2. 办法二：用div元素将内嵌元素和注释包起来。

a) 原代码：

<span></span>

<div class="right">↓len是一个大胖子</div>

</div>

b) 修改后：

<div>

<span></span>

</div>

<div class="right">↓len是一个大胖子</div>

</div>

9、浮动与绝对

问题

描述

1. 当浮动元素与绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{width:200px;height:200px;border:1px solid #000;

position:relative;} /* 定位父级 */

/* 绝对定位元素 */

span{width:50px;height:50px;background:yellow;

position:absolute;top:0;right:-20px;}

/* 浮动元素 */

ul{width:150px;height:150px;background:red;

margin:0 0 0 50px;padding:0;float:left;display:inline;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

标准浏览器

IE6

解决

思路

1. 出现问题的关键原因是并列，我们只需要让浮动元素与绝对定位元素不并列即可。

a) 给定位元素外面包一个div。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{width:200px;height:200px;border:1px solid #000;

position:relative;} /* 定位父级 */

/* 绝对定位元素 */

span{width:50px;height:50px;background:yellow;

position:absolute;top:0;right:-20px;}

/* 浮动元素 */

ul{width:150px;height:150px;background:red;

margin:0 0 0 50px;padding:0;float:left;display:inline;}

</style>

</head>

<body>

<div><span></span></div>

</div>

</body>

</html>

效果

标准浏览器

IE6

10、IE6,7下overflow包不住相对定位

问题

描述

1. 在IE6,7下，子元素有相对定位话，父级的overflow就包不住子元素了。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{width:200px;height:200px;border:1px solid #000;overflow:auto;}

.div{width:150px;height:300px;background:red;position:relative;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

标准浏览器

IE6,7

解决

思路

1. 出现此问题的根本原因是子元素添加了相对定位后提升了层级，而父元素中的overflow在IE6,7下却不能提升层级造成的。知道这一点就好办了，我们只需要再给父元素添加相对定位即可（虽然用了相对定位，但只要不指定偏移量的话，对元素就无任何副作用）。

代码

1. 原代码

a) .box{width:200px;height:200px;border:1px solid #000;overflow:auto;}

2. 修改后

a) .box{width:200px;height:200px;border:1px solid #000;overflow:auto;position:relative;}

效果

标准浏览器

IE6,7

11、IE6,7下绝对定位1px偏差

问题

描述

1. 在IE6下，绝对定位元素的父级元素宽高是奇数时，绝对元素的偏移量中right、bottom会有1px的偏差。

解决

1. 没有解决办法。

2. 建议尽量避开。

a) 如：不用奇数。

12、固定定位

问题

1. 在IE6下不支持。

解决

1. 可以用js来解决。

a) 在IE6下将它处理成绝对定位元素，获取滚动条的top值，将滚动条拉动的距离不断交给这个元素。

b) 其实我们有时不需要考虑IE6了，直接用固定定位即可，抛弃那万恶的IE6，因为市场占有率已经渐渐为0了。

13、透明度

问题

描述

1. IE6,7,8不支持“opacity”样式属性，但有自己的私有滤镜“filter:alpha(opacity=xx)” 。

解决

描述

1. 多个一起使用

filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
-moz-opacity:0.5; /*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/

14、表格

注意

1. 尽量不要给table、th、td以外的表格标签加样式（原则）。

2. 不要给tbody、tr同时加背景样式。

a) 如果给tbady和tr同时加了背景样式，那么在IE6下tbady的背景样式会不起作用。

b) thead同理。

15、IE6,7表单间隙

问题

描述

1. 在IE6,7下，输入类型的表单控件上下各有1px的间隙。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

div{ width:200px;height:32px;border:1px solid red;}

input{ width:100px;height:30px;border:1px solid green;margin:0;padding:0;}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

效果

标准浏览器

IE6,7

解决

思路

1. 加浮动让元素脱离文档流。

a) 给input加浮动。

代码

原代码

1. input{ width:100px;height:30px;border:1px solid green;margin:0;padding:0;}

修改后

1. input{ width:100px;height:30px;border:1px solid green;margin:0;padding:0;float:left;}

效果

标准浏览器

IE6,7

16、IE6,7下border:none无效

问题

描述

1. 在IE6,7下输入类型的表单控件加“border:none”无效。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

div{ width:200px;height:32px;border:1px solid red;background:yellow;}

input{ width:100px;height:30px;border:none;margin:0;padding:0;float:left;}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

效果

标准浏览器

IE6,7

解决

方法一

思路

1. 将“border:none”改成“border:0” 。

代码

原代码

1. input{ width:100px;height:30px;border:none;margin:0;padding:0;float:left;}

修改后

1. input{ width:100px;height:30px;border:0;margin:0;padding:0;float:left;}

方法二

思路

1. 添加一个背景样式属性即可使“border:none”在IE6,7下起作用。

代码

原代码

1. input{ width:100px;height:30px;border:none;margin:0;padding:0;float:left;}

修改后

1. input{ width:100px;height:30px;border:none;margin:0;padding:0;float:left;background:#FFF;}

同样的效果

标准浏览器

IE6,7

17、IE6,7下表单输入背景移动

问题

描述

1. 在IE6,7下，输入类型的表单控件输入文字的时候，背景会跟着一起移动。

解决

思路

1. 把背景加给父级

a) 前面讲表单时讲的很详细，需要的话，可以看。

小结

上面介绍了这么多兼容性问题，其实还有很多别的兼容性问题，但是大多都无法解决。比如说像“file”上传样式问题本身没法设置，以及单选或者复选它的按钮本身很丑，咱们想设置，但在原生的元素上也是没法设置的，另外，lable这个元素不加for属性在IE6下是没有效果的，还有select下拉菜单在IE6下是没法设置高度的，所以在工作中下拉菜单都是拿js模拟的，很少去用原生下拉菜单