会员登录 | 会员注册 | 意见建议 | 网站地图

站长资源综合门户

当前位置:首页 > 站长学院 > 网站设计 > DIV+CSS中浏览器兼容方法及div+css的使用技巧

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

时间:2011-09-12 15:43:21   作者:   来源:   点击:

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

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

CSS样式要注意,float元素需要指定固定宽度,并且要清除浮动,另外float元素不能指定margin属性,因为在IE6浏览器下存在BUG,float浮动元素的宽度总合要小于100%,也就是父级层的盒子的宽度。在我们新建一个css的时候要把所有的标签都归于默认形式,也就是paddingmargin都要设置为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在兼容上和技巧的使用上一些总结方法,如果有遗漏,欢迎大家在下面进行补充,希望能够解决您的问题。( 原创 版权所有)

分享到:

阅读此篇文章的网友还阅读了:

无相关信息

网友评论

热门网站设计