针对WEB前端开发人员的常见浏览器兼容性问题和解决方案提示

遭遇频率: 100％

解决方案: 在CSS中* {边距: 0；填充: 0；}

备注: 这是解决浏览器兼容性问题的最常见和最容易的方法. 几乎所有的CSS文件一开始都会使用通配符将每个标签的内部和外部补丁设置为0.

浏览器兼容性问题2: 在块属性标签浮动之后，并且有水平移动的边距，ie6上显示的边距大于设置的边距

问题的症状: 常见症状是ie6中的后件被推到下一行

遇到频率: 90％（将会遇到更复杂的页面，这是浮动布局最常见的浏览器兼容性问题）

解决方案: 将display: inline添加到float的标签样式控件中；将其转换为内联属性

备注: 我们最常用的是div + css布局，并且div是典型的块属性标签. 在水平布局时，我们通常使用divfloat. 如果水平间距设置是通过边距实现的，那么这肯定是一个兼容性问题.

浏览器兼容性问题三: 设置较小的高度标签（通常小于10px），该高度超过您自己在ie6，ie7和行进中设置的高度

问题的症状: ie6、7和漫游中此标签的高度不受控制，超过了我自己设置的高度

遇到频率: 60％

解决方案: 设置溢出: 对于超过高度的标签隐藏；否则，隐藏. 或将线高设置为line-height小于您设置的高度.

备注: 这种情况通常发生在我们将背景设置为小圆角的标签中. 出现此问题的原因是web前端浏览器兼容性，ie8之前的浏览器将为标签提供行高的最小默认高度. 即使您的标签为空，该标签的高度仍将达到默认的行高.

浏览器兼容性问题四: 内联属性标签web前端浏览器兼容性，设置显示后的浮动布局: 块和水平线的边距，即6个间距错误（类似于第二个）

问题的症状: ie6中的间距比超过设置的间距

机会: 20％

解决方案: 添加显示内容: 内联；显示: 表；显示后: 阻止；

备注: 内联属性标签，为了设置宽度和高度，我们需要设置display: block; （输入标签除外）. 在使用浮动布局和水平边距之后，在ie6下，他在block属性浮动之后出现了水平边距的错误. 但是，由于它本身是一个内联属性标签，因此如果添加display: inline，则无法设置其高度和宽度. 此时，我们还需要在display: inline之后添加display: talbe.

浏览器兼容性问题五: 默认情况下，图片之间的间距

问题的症状: 将几个img标记放在一起时，某些浏览器将具有默认间距，问题1中提到的通配符将不起作用.

机会: 20％

解决方案: 将float属性用于img布局

备注: 因为img标签是一个内联属性标签，所以只要不超过容器的宽度，img标签就会排成一行，但是某些img标签之间会存在间隙浏览器. 这是删除此距离并使用float的正确方法.

浏览器兼容性问题6: 标签最小高度的最小高度设置不兼容

问题的症状: 因为min-height本身是一个不兼容的css属性，所以在设置min-height时，它并不与所有浏览器兼容

碰碰几率: 5％

解决方案: 如果我们要设置最小高度为200像素的标签，则设置必须为: {min-height: 200 px;高度: 自动！重要;高度: 200px；溢出: 可见；}

备注: 当打开B / S系统的前端时，在很多情况下我们都有这种需求. 当内容小于一个值（例如300px）时. 容器的高度为300像素；当内容高度大于此值时，将支撑容器的高度，而不是滚动条. 此时，我们将面临此兼容性问题.

浏览器兼容性问题7: 透明度兼容的CSS设置

方法是: 每次编写一小段代码（布局中一行或一行）时，我们都必须查看它是否在不同的浏览器中兼容. 当然，熟练到一定程度并不那么麻烦. 建议经常遇到兼容性问题的新手使用. 许多兼容性问题是由浏览器对标记默认属性的不同解释引起的. 只要稍加设置，就可以轻松解决这些兼容性问题. 如果我们熟悉标签的默认属性，就可以理解为什么会出现兼容性问题以及如何解决它们.

/ * csshack * /

我很少使用黑客. 这可能是个人习惯. 我不喜欢编写不兼容的代码，然后使用hack解决. 但是黑客仍然非常易于使用.

我可以使用的黑客浏览器分为三类: ie6； ie7和漫游；其他（例如8chromeffsafariopera等）

ie6知道的黑客带有下划线_和星号*

IE7知道的黑客是一个星号*（包括上面的问题6！重要的是，也是一种黑客. 但是，它不那么实用. ）

例如，这样的CSS设置高度: 300像素； *高度: 200像素； _height: 100像素；

ie6浏览器在读取高度时会认为它高300像素: 300像素；继续阅读，他也知道* heihgt，因此当ie6读取* height: 200px时，它将覆盖先前的冲突设置，认为height为200px. 继续阅读，ie6也知道_height，因此他将覆盖200px高的设置并将高度设置为100px;

ie7和Aoyou也在从300px的高度设置中读取. 当他们读取* height200px时，他们停了下来，因为他们无法识别_height. 因此他们会将高度解析为200px;

其余浏览器仅识别第一个高度: 300像素；因此他们会将高度解析为300px.

因为具有相同优先级的属性的设置和冲突的属性将覆盖前者，所以编写顺序非常重要.

最后，严格的开发人员将拥有一套适合他们的RESET.CSS. 结合自己的经验，尝试避免出现不兼容的问题. 为了减少黑客的使用，请尝试遵守W3C标准.

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