左侧边缘在Firefox中被切断，但不是在IE 6/7，和Safari

这看上去很好的Safari浏览器，但不能在Firefox 3.0.11左侧边缘在Firefox中被切断，但不是在IE 6/7，和Safari

火狐：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 {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 & IE7。

来源

2009-07-23 Brad

我总是在与盒子模型类型的东西斗争，这听起来像是与它有关。我很想看到答案。 – 2009-07-23 19:13:11

你可以提供一个演示页面，我可以戳它吗？ – mkoryak 2009-07-23 19:18:42

任何CSS文件的第一行应该是* {margin：0px; padding：0px; }。如果你没有它，这是一个很好的开始。 – blu 2009-07-23 19:19:42

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

它只是一个标准的表？也可以帮助发布HTML，所以我们确切知道你在使用什么。

来源

2009-07-23 20:04:40 Zac

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

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

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

发生这种情况的原因是，当您设置border-collapse：collapse时，Firefox 2.0将边界放到tr的外部。其他浏览器放在里面。

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

来源

2009-07-23 20:25:50 Emily

他们使用的是Firefox 3，而不是2。 – kmiyashiro 2009-08-04 15:48:03

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

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

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

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

来源

2009-08-04 16:23:32 kmiyashiro

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

来源

2010-02-16 21:03:24

左侧边缘在Firefox中被切断，但不是在IE 6/7，和Safari

回答

相关问题