html – 在Firefox中奇怪的表格渲染

发布时间:2020-08-03 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – 在Firefox中奇怪的表格渲染编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
我在 Windows 8.1上使用Firefox 26.0.简单的表格html css布局在不同的缩放级别上呈现奇怪.

可以100%放大Firefox. IE和Chrome正确呈现文档.将html代码更改为常规表/ tr / td没有帮助.

这是Windows 8.1上的Firefox中的错误还是布局错误?

HTML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="board">
        <div class="row">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
    </div>
</body>
</html>

CSS代码

#board {
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}

.cell {
    border: 1px solid;
    display: table-cell;
    height: 1em;
    width: 1em;
}

结果:

100%-2缩小:

100%-3缩小:

100%放大:

100%3放大:

解决方法

来自Bugzilla:

Bug 410959 – [BC] Table cell border widths render incorrectly at
various zoom levels

这是一个bug,还没有人解决它.

此外,如果您有表格数据,请使用table而不是div

对此的解决方案是使用border-collapse:separate;

#board {
    display: table;
    border-collapse: separate;
}

Demo(关于使用边框折叠放大和缩小的错误演示:折叠;)

Demo

总结

以上是编程之家为你收集整理的html – 在Firefox中奇怪的表格渲染全部内容,希望文章能够帮你解决html – 在Firefox中奇怪的表格渲染所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!