网站地图    收藏   

主页 > 前端 > css教程 >

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

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] 相信很多的朋友在div+css的页面制作当中都会遇到这个问题,由于IE系列浏览器对于HTML标签和CSS样式表的解释与其他浏览器会有所区别,所以在制作页面的时候经常会出现一些小BUG,和网...

  相信很多的朋友在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/)

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论