爲什麼Firefox不顯示錶格單元格邊界 - 右側還是左側？

我有一個爲所有表格單元格設置邊界的表格。這用於日曆。當前日期的表格單元格包含一個用於更改該表格單元格的背景顏色的div。但是，在Firefox中查看時，它會覆蓋（或覆蓋 - 我不確定）右側和底部表格單元格邊框。它覆蓋Opera中的頂部和左側表格單元格邊界。它在Chrome和Safari中運行良好。它沒有在IE中測試過。我怎樣才能讓所有的邊框在Firefox和Opera中顯示？下面是代碼：爲什麼Firefox不顯示錶格單元格邊界 - 右側還是左側？

HTML：

<table class="calendar" frame="box" rules="none"> 
    <tr> 
     <td></td>...//seven td's total 
    </tr> 
    <tr><td class="very_light_gray"><div class="calendar_day_wrap">Today</div></td>...</tr> 
    .... // 5 or 6 table rows total 
</table>

CSS：

.calendar { 
    position:inherit; 
    margin:auto; 
    height:100%; 
    width:100%; 
    z-index:99999; 
    border-collapse:collapse; 
} 

.calendar tr { 
    height:20%; 
    position:relative; 
    z-index:2; 
} 

.calendar td { 
    border:1px solid #ccc !important; 
    width:14%; 
    vertical-align: top; 
    position:relative; 
    z-index:2; 
} 

.calendar_day_wrap { 
    position:relative;  
    width:100%; 
    height:100%; 
} 

.very_light_gray { 
    background-color:#F8F8F8 !important; 
}

來源

2012-06-28 John Anderson

如果我能看到改變背景顏色的代碼，我的回答能力會大大提高。另外，border-collaps：collapse;應該是「崩潰」。另外，爲什麼你有所有的Z指數的東西？ – dezman

感謝您的回覆。我修正了上面的代碼，並添加了背景顏色的CSS。 Z-index的東西出於各種原因，但我改變它做不同的值，刪除它等，只是爲了看看它是否有效果。它沒有。 –

您可以設置rules="none"，其中明確關閉列和行邊界。

然後您設置border-collapse:collapse，它使用列/行邊框摺疊單元格邊界。對於每個邊界段，都有一個列表，哪些邊界聲明優先，「明確關閉」是每個規範具有最高優先級的。

您想要使用border-collapse: separate或未設置rules="none"。有機會，你也不想要frame="box"。

來源

2012-06-29 01:45:11

感謝您對「規則」和「框架」的建議。我並不真的需要他們。但是，我仍然沒有看到Firefox或Opera中的所有邊框。我不想'border-collapse：單獨的'，因爲我不需要雙重邊框。 –

那麼，如果你正在做倒塌的邊框，並且想要1px的邊框，那麼你的問題就是理論上邊框以單元格邊界爲中心，每個單元格的邊界爲0.5px。在實踐中，大多數顯示器不能做到這一點沒有醜陋的抗鋸齒，所以我敢打賭，UA是捕捉到像素網格的邊界。但是，這可以將它放在相鄰單元格的空間中......使用2px邊框是否有幫助？ –

良好的洞察力。 td上的2px邊框在Firefox上顯示，但是與其他邊框一樣厚，所以它仍然不理想。另外，我不想要2px邊框。有另一種方法可以解決這個問題嗎？ –

這個代碼是在Opera 12.0和Firefox中工作的。

.calendar { 
    margin:auto; 
    height:100%; 
    width:100%; 
    border-collapse:collapse; 
    border:1px solid #ccc;} 

.calendar tr {height:20%;} 

.calendar tr:nth-child(1) td { 
    border:1px solid #ccc; 
    height:20%;} 

.calendar td { 
    width:14%; 
    vertical-align: top;} 

.calendar_day_wrap { 
    width:100%; 
    height:100%;} 

.very_light_gray { 
    background-color:#F8F8F8;}

來源

2012-06-29 16:30:34 karlcow

爲什麼Firefox不顯示錶格單元格邊界 - 右側還是左側？

回答

相關問題