写在前面的话,也不知道还要不要管ie6、7,晕晕乎乎的
1、h5兼容性
引用html5shiv.js
2、
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- 注意标签嵌套规范
例
样式
结果
- IE6下最小高度问题
在IE6下元素的高度的小于19px的时候,会被当做19px来处理解决办法:`overflow:hidden;`
- 4在IE6下父级有边框的时候,子元素的margin值消失
例
样式
结果
解决
在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条件注释语句
无标题文档