如何调整主要浏览器的兼容性

遇到的频率: 100％

解决方案: 使用CSS *

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

浏览器兼容性问题2: 块属性标签为float之后，存在水平边距，该边距大于IE6中的设置.

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

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

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

备注: 最常用的是div + CSS布局，并且div是典型的块属性标签. 我们通常使用div float来实现水平布局. 如果水平间距是通过边距设置的，那么这将不可避免地遇到兼容性问题.

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

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

遇到的频率: 60％

解决方案: 设置溢出: 隐藏；或将行高设置为小于您设置的高度.

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

浏览器兼容性问题4: 内联属性标签，设置display: block后，使用浮动布局，并且存在水平边距，IE6间距错误

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

遭遇的可能性: 20％

解决方案: 添加display: inline; display: table;显示后: 阻止；

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

浏览器兼容性问题五: 默认情况下图片具有间距

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

遭遇的可能性: 20％

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

注意: 因为img标签是一个内联属性标签，所以只要不超过容器的宽度，img标签就会排成一行，但是某些标签的img标签之间会留有空格浏览器. 这是消除此差距并使用float的正确方法. （我的一个学生使用负余量虽然可以解决，但负余量本身是一种很容易引起浏览器兼容性问题的用法，因此我禁止他们使用它）

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

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

遭遇的可能性: 5％

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

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

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

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

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

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

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

例如，这样的CSS设置:

高度: 300像素； *高度: 200像素； _height: 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/shumachanpin/article-307245-1.html