Question

这在safari中看起来很好，但在firefox 3.0.11

中没有

Firefox：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;
}

表{border-collapse：collapse; }

.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和IE中看起来都是正确的IE7。

Answer 1

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

它只是一张标准表吗？也可以帮助发布HTML，因此我们确切知道您正在使用的是什么。

Answer 2

您是否在表格元素上使用CSS border-collapse？ Firefox以与其他浏览器不同的方式呈现该属性。

删除border-collapse并改为使用cellspacing = 0.

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

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

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

Answer 3

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

就像现在一样，它忽略了边界，并将它添加为纯视觉而非“物理”边界。如果你愿意，可以在表格上方添加一个带有固定高度/宽度/边框的div，并看看firefox在表格边框上方呈现div的边框，重叠它就好像它不在那里一样。现在将div浮动到左边，现在左边的表格边框与div的边界重叠。

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

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

Answer 4

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

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

4 个答案: