Home > Web Front-end > HTML Tutorial > CSS兼容性_html/css_WEB-ITnose

CSS兼容性_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 08:59:53
Original
1147 people have browsed it

在开发中难免会遇到CSS的兼容问题,特别是IE这个臭蛋蛋,今天正好有时间,就整理一下平时遇到的CSS兼容问题以及解决方案.

文档类型的声明

  • 在IE6中如果没有书写这个文档说明,就会进入怪异模式解析现象.

解决方法:

  • 在文件开头写此说明

横向双倍外边距

  • 在IE6中块元素浮动后,会出现横向双倍margin现象

解决方法:

  • 在float标签的样式控制中加入display:inline

IE6最小height值19px

  • 在IE6中即使设置 height:10px,在IE6中也会是19px

解决方法

  • 在CSS中加入overflow:hidden

img外部的border

  • 在IE6,7中,img外部有a标签,即img标签有链接时,会产生边框.

解决方法

  • 在CSS样式中使用border:none

IE6中的透明度设置

  • 设置透明度时,常常使用rgba()和 opacity 来设置,但是,臭蛋蛋不支持.

解决方法

  • 在CSS样式中添加 filter:alpha(opacity=50) ,但是此时 opacity的值是1-100的值.

:hover的兼容

  • 在IE6中:hover,:link,:visited ,:active 只能给 a标签 使用.并且不支持其他伪类.

解决方法

  • 增加 zoom:1的属性

<style>*{    margin: 0;padding: 0;}a:hover em{    color: blue;}a:hover{    zoom: 1;   增加  触发 IE6 下就好用了}</style></head><body>    <a href=""> <span>hello <em>颜色</em> world</span></a></body>
Copy after login

关于CSS Hack

  • _width--只有IE6支持

  • *width --IE6,7 支持 ,常用

  • +width --IE6,7 支持

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template