表格边框的左边缘在 Firefox 中被切断，但在 IE 6/7 和 Safari 中没有答案

【问题标题】：left edge of table border is cut off in firefox, but not in IE 6/7, and Safari表格边框的左边缘在 Firefox 中被切断，但在 IE 6/7 和 Safari 中没有
【发布时间】：2010-02-17 05:03:24
【问题描述】：

这在 safari 中看起来不错，但在 Firefox 3.0.11 中却不行

火狐：http://i31.tinypic.com/11s1d00.png

Safari：http://i30.tinypic.com/fnxu2v.png

表格的 HTML：

<table class="placement-testing-schedule">
  <tr>
  <th>Day</th>
  <th>Date</th>
  <th>Check-in Begins (Entrance of College Center)</th>
  <th>Test Begins</th>
  <th>Registration Begins</th>
  <th>Seating Availability</th>
 </tr>
 <tr>
   <td>Tue</td>
   <td>8/18/09</td>
   <td>10:45 AM</td>
   <td>10:00 AM</td>
   <td>12:30 PM</td>
   <td><span class="open">Open</span></td>
 </tr>
 <tr>
   <td>Wed</td>
   <td>8/26/09</td>
   <td>10:45 AM</td>
   <td>10:00 AM</td>
   <td>12:30 PM</td>
   <td><span class="open">Open</span></td>
 </tr>
</table>

表格的css：

/* ---------- Placement Testing ----------- */

.content-body .col-middle table.placement-testing-schedule {
  margin-bottom:10px;
  border-spacing:10px;
}

table { 边框折叠：折叠； }

.content-body .col-middle table.placement-testing-schedule td, th {
  border:1px solid #055830;
  background-color:#ffc;
  padding:7px;
}

.content-body .col-middle table.placement-testing-schedule th {
  background-color:#fdbe2f;
}

有人知道为什么它在Firefox中被切断了吗？哎呀，它甚至在 IE6 和 IE7 中看起来都是正确的。

【问题讨论】：

我总是与盒模型类型的东西斗争，这听起来与它有关。我有兴趣看到答案。
你能提供一个演示页面吗？
任何css文件的第一行应该是* { margin:0px;填充：0px； }。如果您没有它，这是一个很好的起点。
@blu 我使用 CSS 重置 html、body、div、span、applet、object、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、abbr、首字母缩写词，地址，大，引用，代码，del，dfn，em，字体，img，ins，kbd，q，s，samp，小，罢工，强，sub，sup，tt，var，b，u，i， center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;填充：0；边框：0；大纲：0；字体大小：100%；垂直对齐：基线；行高：1.3em； }
@mkoryak - 不幸的是，我没有......它在防火墙后面。

标签： html css

【解决方案1】：

尝试将边框（与第 td,th 个元素上的边框相同）添加到表格本身。

它只是一个标准表吗？也可能有助于发布 HTML，因此我们确切地知道您正在使用什么。

【讨论】：

【解决方案2】：

您是否在表格元素上使用 CSS 边框折叠？ Firefox 呈现该属性的方式与其他浏览器不同。

移除边框折叠并使用 cellspacing=0 代替。

<table style="border: 1px solid #000;"  cellspacing="0">

这是因为当您设置border-collapse:collapse 时，Firefox 2.0 将边框置于tr 之外。其他浏览器把它放在里面。

在代码中将边框宽度设置为 10px 以查看实际情况。

【讨论】：

他们使用的是 Firefox 3，而不是 2。

【解决方案3】：

这是 Firefox 中的一个错误。 box-sizing: content-box 不适用于表格单元格，目前只适用于在高/宽中包含边框的border-box，它是非标准的，需要修复。

就像现在一样，它忽略了边框并将其添加为纯视觉而非“物理”边框。如果需要，可以在表格上方添加一个具有固定高度/宽度/边框的 div，然后查看 firefox 将该 div 的边框呈现在表格边框上方，将其重叠，就好像它根本不存在一样。现在将 div 向左浮动，现在左边的表格边框与 div 的边框重叠。

不幸的是，我发现可靠地确保边框可见的唯一方法是添加边距：0 1px 1em;到桌子上。

请参阅Firefox's box-sizing spec 以及导致此问题的错误：bug 243412。

【讨论】：

【解决方案4】：

我遇到了类似的问题（FF 3.6）。但在我的情况下，解决方案只是为标题行中的第 th 个元素添加边框（或完全删除该行），它没有设置边框。我看到在您的情况下，您已经有了这些标题行边框。

【讨论】：