常见的浏览器兼容性问题（采访重点）

众所周知，浏览器兼容性是开发人员经常遇到的问题. 这是因为不同的浏览器对代码的解释不同，从而导致页面上的效果不同. 因此，现在我将简要总结一下我在工作中遇到的兼容性问题和解决方案，以供您参考:

类型1: 在块元素浮动之后，添加了水平边距，该水平边距大于IE6下的设置值（属于双重浮动错误）

解决方案: 将display: inline添加到float标签并将其转换为inline元素

第二类: 表单元素行高不一致

解决方案: 添加float: 向左（向左浮动）形成元素；或vertical-align: 中间； （垂直对齐: 居中）

第三类: 设置一个高度较小（小于10像素）的容器，而IE 6无法识别小于10像素的高度；

解决方案: 向容器添加溢出: 隐藏；

第四类: 当img标签嵌套在标签中时，在某些浏览器中img带有蓝色边框；

解决方案: 将border: 0添加到img；或边框: 无；

第五类: 最小高度在IE6下不兼容

解决方案:

1）最小高度: 值；

_height: 值；

2）最小高度: 值；

高度: 自动！重要；

高度: 值；

第六类: 默认情况下，图片有空白

解决方案:

1）在img标签中添加一个左浮动浮点: left;

2）将display: 块添加到img标签；

第七类: 按钮的默认大小不同

解决方案:

1）使用标签来模拟按钮并添加样式；

2）如果按钮是背景图像，则将背景图像直接添加到按钮；

第八类: 错误百分比

解决方案: 父元素的宽度为100％，子元素的宽度为50％. 在IE6下常见浏览器兼容性问题，每个元素的宽度总和超过100％.

解决方案: 在浮动在右侧的子元素上添加clear: right；

第九类: 鼠标指针错误

说明: 光标: 手；只有IE浏览器可以识别，其他浏览器不能识别

解决方案: 游标: 指针；高于IE6的浏览器和其他核心浏览器可以识别；

第十个类别: 透明度属性

解决方案: 对于IE浏览器: 过滤器: alpha（不透明度=值）； （值范围1--100）

与其他浏览器兼容: opacity: value; （值范围0--1）

第11类: 上下边距的重叠

说明: 将上部元素设置为margin-bottom，将下部元素设置为margin-top，浏览器将仅识别较大的值；

解决方案: 从上边距和下边距中选择一个，并仅设置一个值；

关于骇客

我很少使用黑客. 这可能是个人习惯. 我不喜欢编写与IE不兼容的代码，然后使用技巧来解决它. 但是黑客仍然非常有用. 使用黑客，我可以将浏览器分为3类: IE6； IE7和敖友；其他（例如IE8 chrome ff safari歌剧等）

◆被IE6识别的黑客下划线_和星号*

◆IE7已知的黑客是一个星号*

例如，这样的CSS设置:

高度: 300像素; *高度: 200像素; _高度: 100像素;

IE6浏览器在读取height: 300px时会认为高度为300px；继续阅读常见浏览器兼容性问题，他也知道* heihgt，因此，当IE6读取* height: 200px时，它将覆盖前一个的冲突设置，假设高度为200px. 继续阅读，IE6还可以识别_height，因此它将覆盖200px的高度设置并将高度设置为100px；

IE7和Aoyou相同，并从300px的高度设置中读取. 当他们读取* height200px时，他们停了下来，因为他们无法识别_height. 因此，他们会将高度解析为200像素，其余浏览器只会识别第一个高度: 300像素；因此他们会将高度解析为300px. 因为具有相同优先级并希望发生冲突的属性（如果已设置）将覆盖前一个属性，因此编写顺序非常重要.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-285188-1.html