一些常见的浏览器兼容性问题和解决方案的前端访谈

遭遇频率: 100％

解决方案:

您可以使用Normalize清除默认样式. 有关详细信息，请参阅文章: 来，我们来谈谈Normalize.css

您还可以使用以下代码:

body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }

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

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

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

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

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

3. 浏览器兼容性问题三: 设置较小的高度标签（通常小于10像素）. 在IE6，IE7和旅行中，高度超过您设置的高度.

问题的症状: IE6、7和Aoyou中此标签的高度不受控制，超过了您自己设置的高度

遇到频率: 60％

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

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

4. 浏览器兼容性问题4: 内联属性标签，设置显示后的浮动布局: 块和水平线的边距，IE6间距错误

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

遭遇的可能性: 20％

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

备注: 内联属性标签，为了设置宽度和高度，我们需要设置display: block; （除了input / img标签是特殊的以外）. 在使用浮动布局并具有水平边距之后，在IE6下，他在block属性浮动之后出现了水平边距的错误. 但是，由于它是行内属性标签，因此如果添加display: inline，则无法设置其高度和宽度. 此时，我们还需要在display: inline之后添加display: talbe.

5. 浏览器兼容性问题5: 图片默认是隔开的

问题的症状: 将多个img标记放在一起时，某些浏览器将具有默认间距，并且通配符清除间距将无法工作.

遭遇的可能性: 20％

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

备注: 因为img标签是一个内联属性标签，所以只要不超过容器的宽度，img标签就会排成一行，但是有些标签的img标签之间会存在间隙浏览器. 删除此距离并使用float是正确的方法. （也可以使用负边距. 尽管可以解决，但负边距本身是一种很容易引起浏览器兼容性问题的用法，因此请不要使用它. ）

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

问题的症状: 由于min-height本身是不兼容的CSS属性，因此在设置min-height时并不能与所有浏览器很好地兼容

遭遇风险: 5％

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

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

7. 浏览器兼容性问题7: 与各种特殊样式的兼容性，例如透明度，圆角，阴影等. 每种浏览器的代码在特殊样式中都非常不同，因此检查信息的唯一方法是针对不同的代码编写不同的代码浏览器.

8，清除浮点数:

    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }

9，盒子模型

Element {
        box-sizing: border-box;        /*box-sizing: content-box;*/
    }

/ * CSShack * /

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

IE6知道的黑客是下划线和星号*

IE7知道的黑客是一个星号*

例如，这样的CSS设置:

div { height: 300px; *height: 200px; _height:100px; }

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

IE7和Aoyou也从300px的高度设置中读取. 当他们读取* height200px时，他们停止了，因为他们不识别_height. 因此，他们会将高度解析为200像素，其余的浏览器只会识别第一个高度: 300像素；因此他们会将高度解析为300px. 因为将属性设置为相同的优先级并希望冲突会覆盖前一个属性，所以写入顺序非常重要.

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

实践战斗是解决问题的最好方法，也是遇到问题的唯一方法. 您可以自己做更多的事情前端浏览器兼容性问题，从而实现更快更好的成长. 此外，从他人的经验中学习也是进步的捷径.

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