Web前端开发中浏览器兼容性相关问题的解决方法

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

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

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

内联属性标签，在设置显示: 块后使用浮动布局，并且有水平边距，IE6间距错误

问题的症状: IE6中的间距比超出了设置的间距，遇到的机会: 20％；

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

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

图像默认是隔开的

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

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

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

标签最小高度的最小高度设置不兼容

问题的症状: 因为min-height本身是不兼容的CSS属性，所以当设置min-height与所有浏览器都不完全兼容时，遇到的可能性: 5％；

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

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

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

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

兼容性点

1，DOCTYPE影响CSS处理

2，FF: 设置填充后，div将增加高度和宽度，但是IE不会，因此您需要使用！重要的是再设置一个高度和宽度

3. FF : ！支持重要，但IE被忽略. 您可以使用！为FF设置特殊样式很重要

4. div的垂直居中: vertical-align: 居中；将行距增加到与整个DIV行高相同的高度: 200px；然后插入文本并垂直居中. 缺点是控制内容不包装

5. Mozilla firefox和IE中BOX模型的不一致解释导致2px的差异解决方案:

div {保证金: 30px！重要;边距: 28px；}

请注意，这两个边距的顺序不得颠倒. 属性！重要不能被IE识别，但是可以被其他浏览器识别. 因此，在IE中实际上是这样解释的:

div {maring: 30px;边距: 28px}

如果重复定义，将执行最后一个定义，因此您不仅仅可以写空白: XXpx！重要；

浏览器差异

1，ul和ol列表缩进问题

在消除ul，ol和其他列表的缩进时，样式应写为: list-style: none;边距: 0px;填充: 0px；

margin属性对IE有效，padding属性对FireFox有效.

[注]验证后，在IE中设置边距: 0px可以删除顶部，底部，左侧和右侧的凹痕，空格以及列表编号或列表中的点. 设置填充对样式没有影响. 在Firefox中，设置边距: 仅0px可以删除上下空白. 在设置padding: 0px之后，您只能删除左右缩进. 您还必须设置列表样式: none删除列表编号或点. 换句话说前端浏览器兼容性问题，只需在IE中设置margin: 0px即可达到最终效果前端浏览器兼容性问题，而在Firefox中，您必须设置margin: 0px，padding: 0px和list-style: none才能达到最终效果.

2. CSS透明性问题

IE: 过滤器: 程序: DXImageTransform.Microsoft.Alpha（样式= 0，不透明度= 60）.

FF: 不透明度: 0.6.

[注意]最好同时编写两者，并将opacity属性放在下面.

3. CSS圆角问题

IE: ie7以下的版本不支持圆角.

FF: -moz-border-radius-toppx: 4像素；或-moz-border-radius-topleft: 4px； -moz- border- radius-topright: 4px; -moz-border-radius-bottomleft: 4像素； -moz -border- radius- bottomright: 4像素;.

[注意]圆角问题是CSS中的经典问题. 建议使用JQuery框架集设置圆角. 让这些复杂的问题留给其他人思考. 但是，jQuery的圆角只能看到支持整个区域的圆角以及不支持边框的圆角，但是可以通过一些简单的方法来实现此边框的圆角. 下次再介绍.

4，光标: 手VS光标: 指针

问题描述: firefox不支持手，但是支持指针，两者都是手形的指令.

解决方案: 统一使用指针.

5. 不同的字体大小定义

小字体的定义是不同的，在Firefox中为13px，在IE中为16px，差异很大.

解决方案: 使用指定的字体大小，例如14px.

在div和并排排列的多个元素（图片或链接）的div之间，代码中的空格和回车符在firefox中将被忽略，但在IE中默认显示为空格（约3像素）.

6. CSS双线凹凸边框

IE: 边框: 2px开头；.

FF: -moz-border-top-colors: #d4d0c8白色； -moz-border-left-colors: #d4d0c8白色； -moz-border-right-colors: #404040#808080； -moz-border- bottom-colors: #404040#808080;

浏览器错误

1，IE的双距错误

设置为float的div将使ie下设置的边距翻倍. 这是ie6中存在的错误.

解决方案: 添加显示内容: 内联；到这个div；

Web前端开发中的浏览器兼容性问题

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