Question

我有一个非常简单的表，它应该同时显示表格和单元格边框。这在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）使用table id而不是table class; 2）从HTML中删除<table border ="1" >并在CSS中添加样式信息; 3）将CSS代码拆分为单独的border-style，border-color和border-width命令。在每种情况下，代码都会在Chrome和IE中显示，但不会显示Firefox。

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

Correct rendering in Chrome

这就是Firefox中的样子：

Incorrect rendering in Firefox

Answer 1

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

查看差异：

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

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

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

单元格边框没有在firefox中显示

1 个答案: