左端はFirefoxで切断しますが、IE 6/7、およびSafariの

Question

にこれはサファリではなく、Firefoxの3.0.11

Firefoxで正常に見えるされていません。http://i31.tinypic.com/11s1d00.png

サファリ： 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。

Answer 1

境界線（td番目の要素と同じもの）をテーブル自体に追加してみてください。

標準的なテーブルですか？ HTMLを投稿するのに役立つかもしれないので、私たちはあなたが働いているものを正確に知っています。

Answer 2

テーブルの要素にCSSの罫線を使用していますか？ Firefoxはそのプロパティを他のブラウザとは異なる方法でレンダリングします。

border-collapseを削除し、代わりにcellspacing = 0を使用します。

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

これは、border-collapse：collapseを設定すると、Firefox 2.0は境界線をtrの外側に置くからです。他のブラウザはそれを内側に置く。

実際に何が起こっているかを確認するには、コードの境界幅を10pxに設定します。

Answer 3

これはFirefoxのバグです。ボックスサイズ：コンテンツボックスは表のセルには適用されません。現在は、高さ/幅の枠線を含む枠線ボックスのみが適用されます。標準ではないため、固定する必要があります。

これは今では境界線を無視しているため、「物理的な」境界線ではなく視覚的な境界線として追加されます。必要に応じて、固定高さ/幅/境界線を持つテーブルの上にdivを追加し、firefoxがテーブル境界の上にそのdivの境界線をレンダリングするように見てください。 divを左に浮動させると、左のテーブルの境界線はdivの境界線によってオーバーラップされます。

残念ながら、ボーダーが確実に表示されることを確認した唯一の方法は、余白を追加することです：0 1px 1em;テーブルに。

Firefox's box-sizing specとこれを引き起こしているバグbug 243412を参照してください。

Answer 4

私にも同様の問題がありました（FF 3.6）。しかし、私の場合の解決策は、ヘッダー行のth要素にボーダーを追加すること（またはその行を完全に削除すること）でした。境界線が設定されていませんでした。私はあなたのケースでは、すでにヘッダー行の境界線を持っていることがわかります。