css+div通用兼容性代码最全.doc

你可以在css开头加入 *html{padding:0px} http://chengbao.feizhuliu.in/home.php?mod=spaceuid=1do=blogquickforward=1id=268 style *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ /style CSS+DIV 兼容性问题 浏览器兼容代码： 浏览器 符号 IE6 IE7 IE8 FF * √ √ × × !important × √ × √ _ √ × × × \9 × × √ × *html √ × × × *+html × √ × × 说明：”√”代表能识别；” ×”代表不识别 1、案例一（常用） 如果各个浏览器的高度都不相同，代码如下： .warp{ Height:100px; /*IE6、IE7、IE8、FF识别*/ Height:110px\9; /*IE8识别*/ *height:120px!important; /*IE7 识别*/ *height:130px; /*IE6、IE7识别，但上一段代码中!important的级别比*号的级别高，所以此段代码只有IE6中才有效*/ } 2、案例二 如果各浏览器高度只有IE6和IE7中相同，而FF不同，代码如下： .warp{ Height:100px; /*IE6 、IE7、 IE8、FF识别*/ *height:120px; /*IE6、IE7识别*/ } 3、案例三 对各浏览器单独写不同代码，如下： .warp{ height:200px; } /* IE6 、IE7、 IE8、FF识别*/ .warp{ height:300px\9;} /*IE8识别*/ *html .warp{ hegith:210px; } /*IE6识别*/ *+ html .warp{ height:300px;} /*IE7识别*/ 4、案例四 如果各浏览器高度相同只有IE6的不同，代码如下： .warp{ Height:100px; /* IE6 、IE7、 IE8、FF识别*/ _Height:120px; /*IE6识别*/ } 关于css部份技巧,div/IE6/IE7/IE8/FF 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table; 4 IE与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}htmlbody #box{ width: auto; height: auto;