具有指定高度的表td在不同瀏覽器上的工作方式不同

我有一張表，我需要每個單元具有相同的固定高度和寬度。具有指定高度的表td在不同瀏覽器上的工作方式不同

所以我必須：

th, td { 
    min-width: 110px; 
    width: 110px; 
    max-width: 110px; 
    min-height: 60px; 
    height: 60px; 
    max-height: 60px; 
}

一個TD就是：

<td><span>*number*</span></td>

我測試在Firefox 7我的代碼，我看到他們確定的，但在Chrome/IE9的細胞是高。

所以：

帶或不帶最小 - 最大高度，所述高度是：

FF7：56px/60像素（無國界/帶邊框）鉻：62px/66px IE9：61px/65px

問題是我在Photoshop上爲TD製作了一個背景，如果尺寸不對，我看起來很奇怪，我不知道如何解決它。

在這個問題之外，chrome表現怪異。我通過JavaScript應用一些td的頁面加載後，他們不工作鉻...直到你刷新有時。

編輯：表格也有固定的高度和一些邊界間距。

編輯2：我做了一個jsFiddle：http://jsfiddle.net/cFTpp/1/區別是較少（58vs60），但仍然不同。

來源

2011-09-28 Jesus Rodriguez

您是否向頁面添加了poper（完全限定）DOCTYPE？如果您沒有指定DOCTYPE – Tomalak

HTML 5 one，IE切換到怪癖模式渲染（包括不同的框模型），無論如何，鉻是做錯了（或FF錯誤，誰知道） –

我結束了更換div的表格，更容易取得一些結果。

來源

2011-10-19 10:05:05

使用固定表格佈局：

table { table-layout: fixed; }

來源

2011-09-28 11:42:20 kapa

這是獨自不工作，我的意思是，沒有觸摸還要別的嗎。 –

請檢查下面的代碼。

<table border="0" align="center" cellpadding="0" cellspacing="0" style="width:800px;"> 
    <colgroup> 
     <col style="width:200px; background:#CCC"/> 
     <col style="width:100px; background: #666"/> 
     <col style="width:500px; background: #000"/> 
    </colgroup> 
    <thead> 
     <tr> 
     <th style="height:100px">head</th> 
     <th style="height:100px">&nbsp;</th> 
     <th style="height:100px">&nbsp;</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
     <td>foot</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
     <td>body</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
    </tbody>

可以通過改變<col style="width:200px;的寬度調整任何列的寬度。我只寫了內聯樣式。

來源

2011-09-28 12:45:47

具有指定高度的表td在不同瀏覽器上的工作方式不同

回答

相關問題