当前位置:  编程技术>WEB前端

firefox下rowspan+border+border-collapse的bug

    来源: 互联网  发布时间:2014-10-07

    本文导语:  后查具体情况概述为:firefox+table rowspan+border+border-collapse:collapse; 表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的border不同。 先看示例吧: Rank's HTML document * {font-size:15px;text-decoration:none;} td {bord...

后查具体情况概述为:firefox+table rowspan+border+border-collapse:collapse;
表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的border不同。
先看示例吧:
Rank's HTML document * {font-size:15px;text-decoration:none;} td {border-top:1px solid #000} 第一列 第二列 test 第一条中间没有横线 test test 可爱的firefox让我们看到了两条线 test test 可爱的firefox让我们看到了两条线 test test 可爱的firefox让我们看到了两条线 test test 最后一条中间没有横线 test
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

经过验证,两种解决方法。
去除border-collapse
加上一个border-left或者border-right
无独有偶,后来搜索了一下,也有前人踩到了这个坑里,它的解决方法也是:border-left:1px solid #999 important;border-left:none的方法来解决。
(see detail:http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23698654.html)
好在可以通过border的错觉及颜色来解决这个问题。为了偷懒,我直接用上了对方的e.g。看解决前的代码:
table { border-collapse:collapse; } th, td { border: 1px black solid; } th { background-color: #A9AE7B; } td.right_user_img { border-left:none; background-color: #999999; text-align: center; padding: 15px; } td.left_user_img { border-right: none; background-color: #CCCCCC; text-align: center; padding: 15px; } td.left_image_join { background-color: #CCCCCC; border-left: none; } td.right_image_join { background-color: #999999; border-right: none; } img { border: none; } Image Insert Heading Here Image 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

解决后的代码:
table { border-collapse:collapse; } th, td { border: 1px black solid; } th { background-color: #A9AE7B; } td.right_user_img { border-left:1px solid #999999 !important; /*this solves border-collapse/rowspan bug in firefox 3 */ border-left:none; background-color: #999999; text-align: center; padding: 15px; } td.left_user_img { border-right: none; background-color: #CCCCCC; text-align: center; padding: 15px; } td.left_image_join { background-color: #CCCCCC; border-left: none; } td.right_image_join { background-color: #999999; border-right: none; } img { border: none; } Image Insert Heading Here Image 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

PS.好象firefox 一直以来就有这个bug。问多久前有的?至少flock就有了

    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Firefox 23 中文版全新发布
  • linux上大家用的大都是firefox把。那你们用的是什么firefox数据同步插件呢?另外鼠标手势插件呢?
  • redhat9.0下,我安装了紫光输入法和firefox浏览器,结果发现在firefox下用“Ctrl-Shift”切换不出输入法,怎么办?有其他输入法或者浏览
  • linux 怎样 自启动 firefox 跪求指点。。。。
  • firefox 解压后不能运行
  • ubuntu下升级firefox问题
  • 网页开发FireFox插件 Firebug
  • Linux下安装FireFox下问题,急!
  • 求助,firefox安装flash的问题,第一次发贴
  • linux命令行下,无法运行firefox
  • FireFox在Linux如何编译?哪位高人能否指点一下。
  • 有没有搞错啊,CSDN的blog不支持Firefox?
  • fc9下firefox问题
  • Linux下的中文输入与Firefox的问题,谢谢!
  • firefox脱机工作问题
  • firefox看电影
  • 下了一个?firefox1.0?for?linux,但解压后?却不知怎么打开它,希望帮助,谢.? 分噢
  • Firefox 扩展开发包 Jetpack
  • Firefox for iOS
  • 沙盒中的 FireFox 浏览器 Ironfox
  • 请教几个firefox开发的问题


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3