兼容性总结

写在前面的话，也不知道还要不要管ie6、7，晕晕乎乎的

1. 在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动

例：

        ### 左侧        ### 右侧

给它设置css

.box{ width:200px;}.left{background:red;float:left;}.right{float:right; background:blue;}h3{margin:0;height:30px;}

显示如下：

解决办法：

h3{margin:0;height:30px; float:left;}

-2 在IE6下元素要通过浮动并在同一行，就给这行元素都加浮动

例：

样式

    .left{width:100px;height:100px;background:red; float:left;}.right{width:200px;height:100px;background:blue;margin-left:100px;}

结果：

解决：都浮动

3- 注意标签嵌套规范

例

    ### 

样式

   p{width:100px;height:100px;background:Red;}

结果

- IE6下最小高度问题

在IE6下元素的高度的小于19px的时候，会被当做19px来处理解决办法:`overflow:hidden;`

- 4在IE6下父级有边框的时候，子元素的margin值消失

例

样式

body{margin:0;}.box{background:blue;border:1px solid # 000;}.div{width:200px;height:200px;background:red;margin:100px;}

结果

解决

在IE6下解决margin传递要触发haslayout

.box{background:blue;border:1px solid # 000;zoom:1;}

5、css hack

针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!

‘ \9 ’ 所有的IE9及之前

‘ + ’ 和 ‘ * ’ IE7及ie7的ie浏览器认识

‘ _IE6 ’及ie6的ie浏览器认识

例：

.box{ width:100px;height:100px;background:red;background:blue\9;            +background:yellow;_background:green;}@media screen and (-webkit-min-device-pixel-ratio:0){.box{background:pink}}

6、html条件注释语句

无标题文档这是IE9876

关键字：css, html

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！