论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS实例:区分IE6、IE7、FF对HR解释的CSShack

文章类别:div+css布局 | 发表日期:2008-10-5 15:32:56

  因为IE和Firefox对hr默认的各种属性margin,padding等等都不一样,所以定义为0也没用。
  我们可以通过下面的CSS hack来解决:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
hr.ducky{
margin-bottom:1px !important;
>margin-bottom:8px !important;
margin-bottom:8px
}

  不只是针对hr,这只是一个例子。IE6和IE7对hr边距margin的解释是一样的,所以都定为8px,Firefox与IE有区别,下边距只能为1px。

  第一条IE6,IE7,Firefox都读懂,这时候都是1px;第二条IE6,IE7能读懂,都用第二条的8px覆盖了第一条的1px,Firefox不懂,跳到分号以后的下一条,这时候IE6,IE7是8px,FF是1px;第三句IE6,IE7,FF都读懂,因为IE6本身的BUG,所以用第三条覆盖了第二条,IE7因为第二条的!important所以忽视第三条,FF同理忽视第三条。

  这个时候,IE6看第三条,IE7看第二条,FF看第一条。虽然在这个例子里,第三条没有必要,因为IE6与IE7对hr的解释是一样的,但是这里是可以对三种浏览器版本赋予不同的值。

  dUcky认为最好的情况就是不用hack,只要写的规范,一般问题不大,假如有一些差别的话,只要以IE作为第一浏览效果,FF稍微有点区别都没关系,没必要hack,不然维护起来很麻烦,当然只是我的想法。
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058