Firefox 中不显示单元格边框答案

【问题标题】：cell borders not displaying in firefoxFirefox 中不显示单元格边框
【发布时间】：2013-04-23 02:11:25
【问题描述】：

我有一个非常简单的表格，应该同时显示表格和单元格边框。这在 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 中引用 - 但与这个问题无关，或者至少我不这么认为）

这是 CSS：

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

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

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

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

这是它在 Firefox 中的样子：

【问题讨论】：

有点幼稚，但是你试过删除浏览器缓存吗？
在 Firefox 20 中运行良好。jsFiddle

标签： html css firefox cell

【解决方案1】：

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

查看区别：

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

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

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

【讨论】：