常见浏览器兼容性问题摘要

发生概率: 60％

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

4. 设置显示: 阻止行内标签；然后使用浮动布局，然后设置水平边距值，IE6中的显示将大于该设置（IE6双边边距错误）

发生概率: 20％

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

5. 图片默认为空白

发生概率: 20％

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

6. 最小高度与最小标签高度设置不兼容

发生概率: 5％

解决方案: 例如，将标签的最小高度设置为200px

{最低高度: 200像素；

高度: 自动！重要；

高度: 200像素；

溢出: 可见；}

7. 透明兼容设置

出现的可能性: 主要取决于您要写的内容而没有透明度

解决方案: 一句话

transparent_class {

过滤器: alpha（不透明度= 50）;

-moz-opacity: 0.5；

-khtml-opacity: 0.5;

不透明度: 0.5；

}

不透明度: 0.5；这是“最重要的”一项，因为它是CSS中的当前标准. 在大多数版本的Firefox，Safari和Opera中都可以使用. 如果所有浏览器都支持当前标准，那么这就是您所需要的. 当然，他们没有.

过滤器: alpha（不透明度= 50）； IE需要的一个.

-莫兹不透明度: 0.5；您需要此版本来支持旧版本的Mozilla浏览器，例如Netscape Navigator.

-khtml-opacity: 0.5;这是针对旧版本的Safari（1.x）的使用方式，当时它使用的渲染引擎仍被称为KTHML常见的浏览器兼容问题，与currentWebKit相对.

8.Box模型错误

说明: 设置元素的高度和宽度时，还需要为其设置边距和填充值，这将更改元素的实际大小.

解决方案: 在需要边距和填充的div内添加一个div，并在该div中设置边距和填充值.

9. 列出IE6中的楼梯错误

说明: 通常，li中的元素（例如a）具有浮动浮点，但是li本身不浮动.

解决方案:

ul li {float: left;}

或ul li {display: inline;}

10.li空格

描述: 在IE中，li和li之间的垂直间距将增加

解决方案: 明确地在宽度中添加宽度或高度

li a {width: 20px;}

或

li a {display: block;向左飘浮;清除: 左；}

或

li {display: inline;}

li a {display: block;}

或

在每个列表li上设置实线底部，颜色与li的背景色相同

11.overflow: 自动；与位置发生碰撞: 相对

描述: 此错误仅出现在IE6和IE7中，有两个块级元素，父元素设置为溢出: 子元素设置为position: relative;并且高度大于父元素，在IE6-7中，子元素不是隐藏而是溢出.

解决方案: 设置位置: 相对；

12. 浮动层的错位

描述: 当内容超出外包容器定义的宽度时常见的浏览器兼容问题，浮动层将不对齐. 在Firefox，IE7，IE8和其他标准浏览器中，多余的内容超出了边缘. 但在IE6中，容器将忽略定义的宽度值，并且宽度将随着内容宽度的增加而错误地增加. 如果此浮动元素后面跟随一个浮动元素，则将导致未对准.

解决方案: 溢出: 隐藏；

13.IE6克隆文本错误

说明: 如果您的代码结构如下

...

很可能在IE6网页上出现一段空白文本

解决方案:

使用条件注释

删除所有评论

添加显示: 内联到评论前面的浮动元素；

14.IE的图像缩放

说明: 在IE下缩放图像有时会影响其质量

解决方案: img {-mg-interpolation-mode: bicubic;}

15. IE6下png图像的透明错误

说明: 使用透明图片. 使用png24或png32图片在IE6下显示图片. 会有浅蓝色背景.

解决方案:

.img {

背景: 网址（'http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png'）;

_background: 0;

_filter: 程序: DXImageTransform.Microsoft.AlphaImageLoader（src ='http: //shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale'）;

}

img {过滤器: 过程: DXImageTransform.Microsoft.AlphaImageLoader（src ='http: //shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale'）;}

或

'，sizingMethod ='scale'）; “ alt =”“ />

16. 透明背景错误

说明: 在Internet Explorer中，该框架不会自动使背景透明

解决方案:

在iframe调用的content.html页面中设置

主体{background-color: 透明;}

版权声明: 本文的内容由Internet用户自行提供. 版权归作者所有. 社区不拥有所有权，也不承担任何法律责任. 如果您发现该社区存在可疑的窃行为，请发送电子邮件至yqgroup@service.aliyun.com进行举报并提供相关证据. 验证后，社区将立即删除涉嫌侵权的内容.

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