gpt4 book ai didi

html - Firefox 中奇怪的表格呈现

转载 作者:太空狗 更新时间:2023-10-29 15:45:42 26 4
gpt4 key购买 nike

我在 Windows 8.1 上使用 Firefox 26.0。简单的表格 html+css 布局在不同的缩放级别上呈现得很奇怪。

在 Firefox 中 100% 缩放是可以的。 IE 和 Chrome 正确呈现文档。将 html 代码更改为常规 table/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%-2

100% -3 缩小:

100%-3

100% +1 放大:

100%+1

100% +3 放大:

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 (您使用 border-collapse: collapse; 放大和缩小的错误演示)

Demo

关于html - Firefox 中奇怪的表格呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21060690/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com