hack兼容：
-moz- /* Firefox 4 */
-webkit- /* Safari 和 Chrome */ -o- /* Opera */ IE6承认*和_和+，不承认!important IE7识别*和+，不识别_，识别!imortant 而firfox两个都不识别，识别!important <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com.svn/trunk/html5.js"></script> <![endif]--> selector{ background-color:#f00;/*all*/ background-color:#0ff\0;/* ie 8/9 */ background-color:#0f0\9\0;/* ie9 */ 这个经过常识ie8也一样有效，不好使 *background-color:#00f;/*ie6 7*/ _background-color:#ff0;/*ie6*/ background-color//:#090;/*非IE*/ background-color:#900\9;/*全部ie*/ } 当然。还有专门针对IE7的写法：+background-color:#00f; 之前对css hack做过一个简单的汇总《CSS hack 汇总》，如今进行一些更新： “\9“ 仅仅在IE6/IE7/IE8/IE9/IE10下生效 “\0” 仅仅在 IE8/IE9/IE10下生效 “\9\0”仅仅在IE9/IE10下生效 故眼下假设须要仅仅针对ie8的hack，可先使用在IE8/IE9/IE10生效的“\0”,再用仅在IE9/IE10生效的“\9\0”hack覆盖之前的样式。 如 selector{ color:#000; color:#F00\0; /* only for IE8&IE9&IE10 */ color:#000\9\0; /* only for IE9&IE10 */ } 框架用990，非框架用1000 1、设了float:left的元素同意它的右边存在不论什么元素同行显示。不论是内联元素还是块元素。但它的左边还是不同意存在不论什么元素与之同行显示，哪怕其他的元素的代码在前，除非也给前面的元素加上float:left后，才同意同行显示。 设了display:inline的元素，同意它的前后存在其他的内联元素同行显示。关于代码在其前面的块元素之同行显示，则要让前面的元素浮动（无论是左还是右浮动）或设为display:inline。还有代码在后面的是块元素（管它有没有浮动，是左浮动还是右浮动），均不能与之同行，除非设为display:inline。 另外，给块级元素设上display:inline是解决有名的IE6中双倍浮动的利器。 2、float 能使块级元素变成行间元素！ 3、.行间元素仅仅有左右外边距。无上下外边距，且左右外边距不会合并！仅仅有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。 4、IE6对BOX理解的差异导致设为float的div在ie下margin的值会加倍（块级元素margin都会加倍，且float方向和margin同方向时）。如： #box{ float:left; width:100px; margin:0 0 0 50px; } //这样的情况之下IE会产生100px的距离 解决方法例如以下： #box{ float:left; width:100px; margin:0 0 0 50px; display:inline;} //仅仅需给其加display:inline属性使使浮动忽略。就可以解决 5、 float元素的宽度之和要小于100% 6. float元素务必指定width属性 非常多浏览器在显示未指定width的float元素时会有bug。所以无论float元素的内容怎样。一定要为其指定width属性。 另外指定元素时尽量使用em而不是px做单位。7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(能够在float元素内部嵌套一个div来设置margin和padding)。也能够使用hack方法为IE指定特别的值。
8、padding：添加padding值会增加整体尺寸
版权声明：本文博客原创文章。博客，未经同意，不得转载。