div+css(Firefox hr 兼容问题)
来源:互联网 发布:mac终端连接linux中断 编辑:程序博客网 时间:2024/04/28 15:40
Firefox hr 兼容问题,在ie中正常显示的hr属性设置,在Firefox里面不管怎么弄都是不出来,最后看到一篇文章说ff中必须设置背景颜色才有效果的,这种问题自己闭门造车的话整上个三天三夜都找不到解决办法啊!
把代码贴出来分享下:
hr {
width:415px; color:#FF0000;
background:#FF0000; border:thin; height:1px; text-align:left;
}
.imghrcontent {
position: absolute; left: 145px; top: 65px;
}
<hr class="imghrcontent" />
参考资料:
通常我们都会定义 HR 的显示外观, 例如显示单行的细线, 像这里显示的这样. 不过在 Firefox 浏览器中, 这样的定义会没有任何效果甚至会看不到横线:
HR {COLOR:#468cad;
height: 1px; border: 0;}
但是只要加入背景色属性, 就能显示了:
HR {color:#468cad;
background:#468cad;
border: 0; Height:1px;
}
-----------
因为IE和Firefox对hr默认的各种属性margin,padding等等都不一样,所以定义为0也没用。
我们可以通过下面的CSS hack来解决:
Example Source Code [www.52css.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,不然维护起来很麻烦,当然只是我的想法。
后记:由于火狐和ie对高度的解释不同,导致滚动的内容在ie里面截取的效果和火狐的不一样,调整了半天就是无法
让他们一样完整截取,后来受到上面的hack写法的启发,终于写出第一个时间的css hack来了,哈哈。
.imghrcontent {//水平线用margin-top: 0px; padding:0px;让他绝对居顶
position: absolute; left: 145px; top: 72px;width:415px;height: 1px;
line-height:150%; vertical-align:top;margin-top: 0px; padding:0px;
}
.contendiv {//滚动的div
position: absolute; left: 145px; top: 75px; width: 435px;height: 100px;
OVERFLOW-Y:auto;OVERFLOW-X:hidden;vertical-align:middle;
SCROLLBAR-ARROW-COLOR: #cccccc; SCROLLBAR-TRACK-COLOR:#F6F6F6;SCROLLBAR-FACE-COLOR:#eeeeee;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
.realcontent {//实际内容的divmargin-top:8px为火狐识别>margin-top:3px为ie7识别margin-top:3px;为ie6识别
position: absolute; left: 0px; top: 0px; width: 410px;height: 100px;
text-align:left;line-height:150%;
margin-top:8px !important;
>margin-top:3px !important;
margin-top:3px;
}
- div+css(Firefox hr 兼容问题)
- ie与Firefox(ff) div+css兼容问题
- Firefox解决<hr/>划线兼容问题
- div+css 浏览器兼容问题
- css+div的兼容问题
- DIV+CSS浏览器兼容问题
- div+css - Firefox和IE浏览器兼容问题 - 用CSS实现cellSpacing属性效果
- css firefox下的兼容问题
- div+css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致抖动
- div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...)
- DIV+CSS布局在IE和firefox中常见不兼容问题及解决方法
- div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..
- div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..
- div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..
- div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...)
- div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..
- CSS缩放:zoom(解决Firefox、Opera的兼容问题)
- div+css浏览器兼容问题解决方法
- asp.net使用参数(parameters)的方法执行数据库操作例子
- ASP.NET Cache
- 换种生活态度
- java 数据库连接池
- Linux Ubuntu 9.1 fcitx 小企鹅 中文输入法安装
- div+css(Firefox hr 兼容问题)
- magento -- 推荐插件 -- Magic_Thumbnails
- 转载:QT图形视图框架(The Graphics View Framework)
- 通过javascript获得url参数
- 如何提高ASP.NET页面载入速度的方法
- 项目管理之关键链法VS关键路径法
- java.lang.UnsupportedClassVersionError: Bad version number in .class file
- MESSAGE TYPES
- Microsoft Data Access Technologies Road Map