3

次の HTML は、最新の Firefox で正しくレンダリングされません。IE と Chrome は問題ありませんが、Firefox では表のセル内に白い縦線が表示されます。

Firefox 21 でレンダリングされた例は、次の場所にあります。

http://tinypic.com/r/2w2qvb6/5

ファイアフォックス

これは Firefox のバグですか、それとも何か不足していますか?

HTML:

<table>
    <tbody>
        <tr>
            <td>
                <div></div>
            </td>
        </tr>
    </tbody>
</table>

CSS:

table{
    border: 2px solid red;
    border-collapse: collapse;
}

td{
    border: 2px solid red;
    padding: 0px;
}

div{
    background:blue;
    height: 100px;
    width: 100px;
}

削除border-collapse: collapse;すると、縦の白い線が削除されます。しかし、私は本当にテーブルの境界線を折りたたみたいと思っています。

JSfiddle: http://jsfiddle.net/FeuBx/

更新: この問題は、ブラウザのズーム レベルが 100% (Ctrl + 0) の場合にのみ発生します。

4

1 に答える 1

0

次のようにページの上部に HTML5 DOCTYPE を設定すると、コードはそのまま機能します。

<!DOCTYPE html>

<html>

<head>
<title>Test</title>
<style type="text/css">
table{
    border: 2px solid red;
    border-collapse: collapse;
}

td{
    border: 2px solid red;
    padding: 0px;
}

div{
    background:blue;
    height: 100px;
    width: 100px;
}
</style>
</head>

<body>

<table>
    <tbody>
        <tr>
            <td>
                <div></div>
            </td>
        </tr>
    </tbody>
</table>

</body>

</html>
于 2013-06-13T17:07:12.950 に答える