td元素上的Firefox css边框宽度答案

【问题标题】：Firefox css border-width on td elementtd元素上的Firefox css边框宽度
【发布时间】：2012-09-19 09:12:57
【问题描述】：

我无法在 Firefox 中将边框宽度设为 3px 纯绿色，即使它在 Chrome 中运行也是如此。我怎样才能解决这个问题？我的代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
        <head>
                <style>
                           td {border: 3px solid green; background:blue;}
                </style>
        </head>
        <body>
                <table>
                        <tr>
                               <td></td>
                               <td></td>
                               <td></td>
                        </tr>
                        <tr>
                               <td></td>
                               <td></td>
                               <td></td>
                        </tr>
                        <tr>
                               <td></td>
                               <td></td>
                               <td></td>
                        </tr>
                </table>
        </body> 
</html>

【问题讨论】：

它正在工作 - jsfiddle.net/avcfp
谢谢，边框塌陷就是答案。

标签： css firefox html-table

【解决方案1】：

要消除空格并避免单元格之间出现双边框，您必须折叠它们，例如：

table {
    border-collapse: collapse;
}

DEMO

使用某种 CSS 差异消除器也是一个好主意，它可以为您节省大量时间并有助于避免此类情况 - Normalize CSS 或 CSS Reset

【讨论】：

【解决方案2】：

这里是 jsfiddle (http://jsfiddle.net/jw5Gg/1/)，我添加了填充以给它一些空间。但实际上它有你只需要内容的边界。我希望这会有所帮助。

【讨论】：