CSS兼容性问题.docVIP

/huang_xw/article/details/7295977 一、CSS?HACK以下两种方法几乎能解决现今所有HACK.1,?!important随着IE7对!important的支持,?!important?方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)style#wrapper{width:?100px!important;width:?80px;}/style2,?IE6/IE77对FireFox*+html?与?*html?是IE特有的标签,?firefox?暂不支持.而*+html?又为?IE7特有标签.style#wrapper{#wrapper?{?width:?120px;?}*html?#wrapper?{?width:?80px;}*+html?#wrapper?{?width:?60px;}}/style注意:*+html?对IE7的HACK?必须保证HTML顶部有如下声明：!DOCTYPE?HTML?PUBLIC?-//W3C//DTD?HTML?4.01?Transitional//EN　二、万能?float?闭???关于?clear?float?的原理可参见?[How?To?Clear?Floats?Without?Structural?Markup]将以下代码加入Global?CSS?中,给需要闭合的div加上?class=clearfix?即可,屡试不爽.style?.clearfix:after{content:.;display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}?.clearfix?{display:block;}??/style三、其他兼容技巧1,?FF下给?div?设置?padding?后会导致?width?和?height?增加,?但IE不会.(可用!important解决)2,?居中问题.1).垂直居中.将?line-height?设置为?当前?div?相同的高度,?再通过?vertical-align:?middle.(?注意内容不要换行.)2).水平居中.?margin:?0?auto;(当然不是万能)3,?若需给?a?标签内内容加上?样式,?需要设置?display:?block;(常见于导航标签)4,?FF?和?IE?对?BOX?理解的差异导致相差?2px?的还有设为?float的div在ie下?margin加倍等问题.5,?ul?标签在?FF?下面默认有?list-style?和?padding?.?最好事先声明,?以避免不必要的麻烦.?(常见于导航标签和内容列表)6,?作为外部?wrapper?的?div?不要定死高度,?最好还加上?overflow:?hidden.以达到高度自适应.7,?关于手形光标.?cursor:?pointer.?而hand?只适用于?IE.1?针对firefox?ie6?ie7的css样式现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。现在写一个CSS可以这样：#1?{?color:?#333;?}*?html?#1?{?color:?#666;?}*+html?#1?{?color:?#999;?}那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。2?css布局中的居中问题主要的样式定义如下：body?{TEXT-ALIGN:?center;}#center?{?MARGIN-RIGHT:?auto;?MARGIN-LEFT:?auto;?}说明：首先在父级元素定义TEXT-ALIGN:?center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:?auto;MARGIN-LEFT:?auto;?”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的di