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

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 13:04 点击:

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

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • WordPress添加百度喜欢按钮小技巧
      • Wordpress 博客如何实现自定义Gravatar头像
      • 网站设计分析:建立良好的视觉层级
      • 网站设计分析:“中国式设计”的三个方向
      • 案例分析:奥巴马筹款网站的制作过程
      • 创建不平衡的平衡:在网页设计中使用不对称设计
      • 7大主流B2C首页导航栏设计对比分析
      • Wordpress页面模板制作方法及使用
      • css控制文字前的小图标
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1