浏览器兼容性题问解决方法.docVIP

浏览器兼容性问题解决方法 一、HACK 以下两种方法几乎能解决现今所有HACK。 1, !important? 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) style #wrapper { width:?100px!important;?/*?IE7+FF?*/ width:?80px;?/*?IE6?*/ } /style? 2, IE6/IE77对火狐 *+html 与 *html 是IE特有的标签, 火狐 暂不支持.而*+html 又为 IE7特有标签. style #wrapper { #wrapper?{?width:?120px;?}?/*?火狐?*/ *html?#wrapper?{?width:?80px;}?/*?ie6?fixed?*/ *+html?#wrapper?{?width:?60px;}?/*?ie7?fixed,?注意顺序?*/ } /style? 注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明： !DOCTYPE?HTML?PUBLIC?-//W3C//DTD?HTML?4.01?Transitional//EN　/TR/html4/loose.dtd? 二、万能 float 闭合 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上 class=clearfix 即可,屡试不爽. style /*?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? 三、其他兼容技巧 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.) 水平居中. 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 针对火狐 ie6 ie7的css样式 现在大部分都是用!important来hack，对于ie6和火狐测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。 现在写一个CSS可以这样： #1?{?color:?#333;?}?/*?Moz?*/? *?html?#1?{?color:?#666;?}?/*?IE6?*/? *+html?#1?{?color:?#999;?}?/*?IE7?*/? 那么在火狐下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。 2 css布局中的居中问题 主要的样式定义如下： body?{TEXT-ALIGN:?center;} #center?{?MARGIN-RIGHT:?auto;?MARGIN-LEFT:?auto;?}? 说明： 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。 但在mozilla