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

遇到的频率: 100％

解决方案: css * {边距: 0;填充: 0；}

注意: 这是最常见和最简单的浏览器兼容性问题. 几乎所有的css文件都以通配符*开头，以将每个标签的内部和外部补丁程序设置为0.

浏览器兼容性问题2: 块属性标签浮动后，有一个水平边距，该边距大于ie6中设置的边距

问题的症状: 常见的症状是ie6中的下一个块位于下一行

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

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

备注: 最常用的是div + css布局，并且div是典型的块属性标签. 在水平布局时，我们通常使用div float来实现水平间距. 如果使用margin，则肯定会遇到兼容性问题.

浏览器兼容性问题三: 设置一个小的高度标签（通常小于10像素），将高度设置为ie6，ie7，并且游戏超出了您设置的高度

问题的症状: 此标记在ie6、7和迁移中的高度不受控制，超过了您设置的高度

遇到的频率: 60％

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

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

浏览器兼容性问题4: 内联属性标签，设置display: 块后的浮动布局和水平边距，即ie6间距错误（类似于第二个错误）

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

遇到机会: 20％解决方案: 添加显示: 内联；显示: 表；显示后: 阻止；

注意: 为了设置内联属性标签的宽度和高度，我们需要设置display: block; （除了input标签比较特殊）. 使用浮动布局和水平边距后，在ie6下，他在块属性浮动之后出现了水平边距的错误. 但是，由于它是一个内联属性标签常见的浏览器兼容问题，因此如果添加display: inline，则无法设置其高度和宽度. 此时，我们还需要在display: inline之后添加display: talbe.

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

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

会议机会: 20％

解决方案: 使用float属性来布局img

注意: 因为img标签是一个内联属性标签，所以只要不超过容器的宽度，img标签就会对齐，但是某些浏览器之间会留有空格. 这是使用float删除此间距的正确方法. 浏览器兼容性问题6: 最小标签高度设置的最小高度不兼容

症状: 由于min-height本身是不兼容的css属性，因此在设置min-height时，它不能与浏览器兼容. 机会: 5％解决方案: 如果要设置标签，最小高度为200px. 您需要进行以下设置: {min-height: 200px;高度: 自动！重要;高度: 200px；溢出: 可见；}

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

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

方法是: 每次我们编写一小段代码（布局中的一行或一块）时，我们都必须检查它是否在不同的浏览器中兼容. 当然，熟练到一定程度并不那么麻烦. 推荐给经常遇到兼容性问题的新手. 许多兼容性问题是由浏览器对标签默认属性的不同解析引起的. 只要我们进行设置，就可以轻松解决这些兼容性问题. 如果我们熟悉标签的默认属性，则可以理解为什么会出现兼容性问题以及如何解决它们. / * css hack * / /我很少使用黑客，这可能是个人习惯. 我不喜欢编写不兼容的代码，然后使用技巧来解决它. 但是黑客仍然非常易于使用. 使用黑客，我可以将浏览器分为三类: ie6;即和迁徙；其他（ie8 chrome ff safari Opera等）. ie6识别的黑客是下划线_和星号* ie7移民识别的黑客是星号*（包括上述内容）！重要的问题6也可以视为骇客. 但是，它不太实用. ）例如，这样的CSS设置高度: 300像素； *高度: 200像素； _height: 100像素；当浏览器读取高度时，ie6浏览器会认为: 300px 300px高时；继续阅读，他也知道* heihgt常见的浏览器兼容问题，因此当ie6读取* height: 200px时，它将覆盖前一个的冲突设置，并认为高度为200px. 继续阅读，ie6也会识别_height，因此他将覆盖200px的高度设置并将高度设置为100px； ie7和Miyou也从300px的高度设置中读取了内容. 当他们读取* height200px时，它们会停止，因为它们无法识别_height. 因此，他们会将高度解析为200px；其余浏览器仅识别第一个高度: 300像素；因此他们会将高度解析为300px. 由于相同的优先级设置和有冲突的属性设置将覆盖前一个设置，因此写入顺序很重要.

最后，严格的开发人员将拥有自己的RESET.CSS集. 结合自己的经验，尝试避免出现不兼容问题. 为了减少黑客的使用，请尝试遵守W3C标准. 返回搜狐，查看更多

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