DIV+CSS中浏览器兼容方法及div+css的使用技巧

　　相信很多的朋友在div+css的页面制作当中都会遇到这个问题，由于IE系列浏览器对于HTML标签和CSS样式表的解释与其他浏览器会有所区别，所以在制作页面的时候经常会出现一些小BUG，和网页错位等现象，下面站长好站为大家讲解一写，在div+css中如何兼容各大浏览器。

　　首先我们先要检查相应的HTML标签，如果你的标签错误，无论你如何修改CSS样式，都不会解决问题，即使是老手也经常会犯标签嵌套错误。CSS样式是否有错误，比如你是否少了“;”分号分割，是否忘记了“}”结束大括号。HTML中是否忘记了DOCTYPE声明。

　　CSS样式要注意，float元素需要指定固定宽度，并且要清除浮动，另外float元素不能指定margin属性，因为在IE6浏览器下存在BUG，float浮动元素的宽度总合要小于100%，也就是父级层的盒子的宽度。在我们新建一个css的时候要把所有的标签都归于默认形式，也就是padding和margin都要设置为0，可以用“*”号来还原默认样式，因为在各大浏览器中对于默认的div、li、ul等标签的内外间距解释不同，所以我们要全部设置为0，需要的时候在单独设置。

　　但是如果不管如何的检查，HTML和CSS都没有问题，但是就是不兼容，那么就可以用各各浏览器之间的hack来解决兼容上的问题，下面我给出我个人比较常用的一些浏览器hack。

　　1、!important

　　!important是针对于火狐等标准浏览器特有的hack，IE6不支持该声明，使用时要提前声明。例(.div{ width:100px !important;} .div{ width:50px;})，火狐等标准浏览器的DIV就是100像素的宽度，而IE6则是50像素的宽度。

　　*html *+html /9

　　这三样分别为IE6、IE7、IE8的特有标签，这样就可以分别为IE6、IE7、IE8分别设置不同的样式，如*html div{ width:100;} *+html div{ width:90px;} div{ width:80px/9;} 这样设置的话，那么IE6的宽度是100像素，IE7的宽度为90像素，IE8的宽度为80像素，这样如果在结合上面的!Important，那么就可以彻底的把IE6、IE7、IE8、火狐等标准浏览器进行分别设置样式了，从而达到浏览器兼容。

　　上面说了各大浏览器的hack，如果你全部掌握了，制作出一个兼容主流浏览器的网页是非常容易的，唯一的区别就是CSS的代码多一些而已。下面介绍一些在div+css中使用的一些技巧。

　　在CSS中写div{ width:100px; margin:0 auto;}可以使DIV块在整个网页中横向居中。

　　在CSS中写div{ height:20px; line-height:20px;}这样写可以使这个DIV中的内容在20像素的高度之中进行垂直居中，但是需要注意的是，该内容不可以换行，否则在火狐等浏览器下内容会重合，而在IE浏览器中会换行。

　　如果需要给内联元素，如span、a等标签设置宽度和高度，必须给它们设置成块元素，a,span{display:block或inline-block;}前一个是把a和span标签改变成块元素，第二个是把a和span改成内联块元素。

　　ul、li等元素在各大浏览器中都有样式和padding，所以在使用前，应该进行事先声明。

　　清除float，可以用.clear{ clear:both;}这个需要在浮动结束位置进行设置，也可以在父标签中设置 div{ height:1%; overflow:hidden; }这样也是可以清除浮动的，但是有的时候不好使，还是得用第一种方法。

　　以上就是我个人对于div+css在兼容上和技巧的使用上一些总结方法，如果有遗漏，欢迎大家在下面进行补充，希望能够解决您的问题。(站长好站原创 http://www.zzhaoz.com/wangzhanyunying/wangzhansheji/20110912/243/)

补充：web前端 , HTML/CSS  ,