1

我有一个非常简单的表格，应该同时显示表格和单元格边框。这在 Chrome 和 IE 中运行良好，但 Firefox 只显示表格边框，而不显示单元格边框。这是HTML：

<table border = "1" class ="MyTable">
   <tr>
       <td class = "c1"></td>
       <td class = "c2"></td>
       <td class = "c3"></td>
       <td class = "c4"></td>
       <td class = "c5"></td>
       <td class = "c6"></td>
       <td class = "c7"></td>    
       <td class = "c8"></td>
       <td class = "c9"></td>
       <td class = "c10"></td>
</tr>   
</table>

（所有 td 类都将在后面的 javascript btw 中引用 - 但与这个问题无关，或者至少我不这么认为）

这是CSS：

table.MyTable {
    margin-left: 10%;
}

table.MyTable td
{   
   width: 20px;
   height:30px;
   border: 4px solid black;
}

我试过 1）使用表 id 而不是表类；2)<table border ="1" >从 HTML 中删除并在 CSS 中添加样式信息；3) 将 CSS 代码拆分为单独的边框样式、边框颜色和边框宽度命令。在任何情况下，代码都会在 Chrome 和 IE 中正常显示，但在 Firefox 中则不会。

作为参考，它应该是这样的（在 Chrome 中）：

在 Chrome 中正确渲染

这是它在 Firefox 中的样子：

Firefox 中的渲染不正确

4

1 回答 1

2

我已经找到了答案，我在这里添加它以防其他人有同样的问题。<!DOCTYPE html>在文档开头添加标签可以解决问题。

看看区别：

http://www.users.on.net/~tschembri214/test1.html - 正确显示

http://www.users.on.net/~tschembri214/test.html - 无法正确显示

我已经确认第二个链接在 3 台不同计算机上的 Firefox 上无法正确显示。除了包含 doctype 标记之外，两个页面中的所有内容都是相同的。此外，这不会在 jsfiddle 上重现 - 它可以在 Firefox 上没有标签的情况下工作。

于 2013-04-23T21:46:52.793 回答