Question

我发现Firefox和Chrome在同一个HTML表格中有不同的行为。

Firefox：行之间的空间是平分的。

Chrome：行之间的空格不均等。

有人能告诉我发生了什么事吗？

<html>
    <body>
        <table border="1" width="100%">
            <tr>
                <td rowspan="3">AAA</td>
                <td>BBB</td>
                <td rowspan="3"CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/></td>
            </tr>
            <tr>
                <td>BBB</td>
            </tr>
            <tr>
                <td>BBB</td>
            </tr>
        </table>
    </body>
</html>

Answer 1

这是Chrome / Webkit浏览器的已知渲染问题。

用户在此处提供了解决方案：Table cells bad rendering with Google Chrome/Webkit

Answer 2

您需要使用<br/>代替<br>来关闭代码。

在兼容的XHTML中，所有标签都需要正确关闭。在这种情况下，不是使用</br>关闭代码，而是使用尾随/来执行此操作。

<br></br>

相当于

<br/>

你会对图像元素做同样的事情：

<img src="..."/>

Answer 3

有一个类似的问题，我在Chrome中的行之间获得1px空间，但在其他浏览器中没有。当我在CSS中添加以下内容时解决了这个问题。

td{
   padding: 0px 0px;
   position:relative;
}

关键是将td设置为“position：relative”。出于某种原因，它解决了这个问题。在这种情况下，也许同样有帮助。

Answer 4

如果您关闭第三个<td...

，该怎么办？

<td rowspan="3"CCC
<td rowspan="3">CCC

HTML表格 - 行之间的空格

4 个答案: