十大技巧轻松解决CSS兼容问题

发布时间：2013-06-11 01:04:58作者：知识屋

大家在学习了很多关于CSS布局的知识与技巧，然而CSS样式兼容问题也不容小看，它引出的问题往往让大家一愁莫展，由于各浏览器对CSS的不同解释，造成本来IE7可正常显示，但到了firefox 、ie6等其它浏览器上，却出现错位、下沉等问题，只得在firefox 、ie6 、ie7之间不停的切换调试，汗…最近又有两款浏览器加入googleChrome和IE8，某个浏览器一统天下看来是没希望了，只能尽量克服兼容问题。找到一篇解决兼容问题的文章，还是很有效的。下面向大家介绍“十个超级技巧助你解决CSS兼容问题”，大家遇到问题时，不仿对照着看一看。

　　一、针对firefox ie6 ie7的css样式

　　现在大部分都是用！important来hack，对于ie6和firefox测试可以正常显示，但是ie7对！important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：

　　示例代码

　　#abc { color： #333； } /* Moz */

　　* html #abc { color： #666； } /* IE6 */

　　*+html #abc { color： #999； } /* IE7 */

　　那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

　　二、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，只要在每个拆出的div里定义MARGIN-RIGHT： auto；MARGIN-LEFT： auto；就可以了。

　　三、盒模型

　　示例代码

　　#box{

　　width：600px；

　　//for ie6.0- w＼idth：500px；

　　//for ff+ie6.0

　　}

　　#box{

　　width：600px！important

　　//for ff

　　width：600px；

　　//for ff+ie6.0

　　width /**/：500px；

　　//for ie6.0-

　　}

　　四、浮动ie6产生的双倍距离

　　示例代码

　　#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；

　　五、IE与宽度和高度的问题

　　IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

　　示例代码

　　#box{ width： 80px； height： 35px；}

　　html>body #box{ width： auto； height： auto； min-width： 80px； min-height： 35px；}

　　六、页面的最小宽度

　　min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：

　　然后CSS这样设计：

　　示例代码

　　#container{

　　min-width： 600px；

　　width：e-xpression（document.body.clientWidth < 600？ “600px”： “auto” ）；

　　}

　　第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。