2010-08-31 67 views
5

我已經搜索了近半天...但我找不到爲什麼chrome6/7似乎是唯一的瀏覽器與IE8/FF3.6/Opera相比不會將填充添加到表格單元格的指定寬度。鉻與FF/IE /歌劇計算表格單元格寬度? (表格佈局:固定)

當然,如果您使用table-layout:fixed, ,由於突然間他們不得不注意指定的px寬度,這一點變得至關重要。

好的最後我的問題:有誰知道爲什麼Chrome計算方式不同,哪種瀏覽器是正確的(標準符合),並希望有一個優雅的解決方案?

目前,我唯一的解決辦法是用在哪裏手動填充添加到寬...哆嗦一個chrome.css條件註釋...

(順便說一句:人誰感到動心告訴PX寬度不正確webdeveloping ......隨意離開這個頁面默默)

此外:在對於回信
首先感謝您立即回信..我試圖儘可能縮短它,並且在那裏因爲我減少了事實的最低...但是,正如你所說,有很多在webdeveloping varibales的,所以我試圖澄清......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     div { width:300px; } 
     table { table-layout:fixed; width:100%; height:50px; } 
     td.col1 { width:20px; background-color:blue; } 
     td.col2 { width:40px; background-color:red; } 
     td.col3 { width:60px; background-color:yellow; } 
     td.col3 { width:auto; background-color:yellow; } 

     td { padding:5px; } 
    </style> 
</head> 
<body> 
    <div> 
     <table cellpadding="0" cellspacing="0"> 
      <tr> 
       <td class="col1"></td> 
       <td class="col2"></td> 
       <td class="col3"></td> 
       <td class="col4"></td> 
      </tr> 
     </table> 
    </div> 
</body> 

現在

如果你切換CSS線

td { padding:5px; } 

在不同的瀏覽器,你會看到鑲邊包括填充,寬度範圍內,而其他添加它

希望這就是有助於澄清和進階感謝ANCE
伯尼

+1

你可以發表一個簡短的例子來證明你看到的問題嗎? – 2010-08-31 01:09:55

+1

您是否提供有效的文檔類型?例如以標準模式呈現。這在嘗試控制渲染時會產生顯着差異。 – scunliffe 2010-08-31 01:16:04

+0

我在原始文章中加了幾行,希望有助於澄清 – berny 2010-08-31 10:10:18

回答

2

我試圖重現你的問題,但下面看起來完全一樣,以我在Chrome 7和Firefox 3.6:

<!DOCTYPE html> 
<style> 
table { table-layout: fixed; border: 1px solid black; } 
td { width: 5px; background: green; outline: 1px solid red; padding: 5px; } 
</style> 
<table> 
<tr><td></td><td></td></tr> 
</table> 

爲了解決你的問題,我建議你先嚐試添加如果您還沒有文檔,請使用文檔類型。使用文檔類型會觸發標準模式,這意味着瀏覽器之間的行爲更可能是一致的。我上面使用的是<!DOCTYPE html>,它是HTML5文檔類型,但它實際上可以在pretty much all browsers中觸發標準模式。

如果標準模式不能幫助您獲得更好的一致性,那麼請嘗試將問題簡化爲一個簡單示例;剝去一切無關緊要的東西,直到你剩下的東西足以看到你的問題。我上面給出的例子顯示了我的意思,只需足夠的標記和樣式即可輕鬆查看錶格並在瀏覽器之間進行比較。一旦你減少到一個最小的例子,你可能會自己看到問題,或者如果沒有,你會有東西,你可以發佈在像StackOverflow這樣的論壇,並得到更有用的答案,因爲人們不必猜測什麼是什麼你的問題是,或者瀏覽一整頁HTML和CSS,只是爲了找到你提到的一個小問題。

0

的原因可能是兩者之一:

  1. 您已設置表和個體細胞的寬度屬性,以及細胞的總寬度是不一樣的,你賦值到桌上;或
  2. 單元格的總寬度(以及表格的寬度)大於包含元素(div)的寬度。如果是這種情況,Chrome會重新分配單元格寬度,使它們與CSS不同。

看着你的標記,我建議你首先設置一個實際值td.col3或刪除'自動',看看會發生什麼。

1

對於表的佈局:固定CSS:

td { width: 150px; padding: 5px; } 

下面顯示的結果(左:鍍鉻;右:火狐): [計算器不允許我張貼圖片..尚未]

反轉片:5-140-5 FIREFOX:5-150-5

建議/解決方法: 儘量不要到TD層上使用填充。總結TD內您的內容與一個div/span元素:

span.column_wrap 
{ 
    padding: 0 3px; 
    display: block; 
    line-height: 26px; 
} 

<td><span class="column_wrap">content here</span></td> 
0

有這個bug,以及我注意到,在Chrome中,如果添加錶行的高度(例如你的表的標題),以40後,再在整個表格中添加5個填充,表格行高現在變爲45.這不會發生在Firefox上。

因此,爲了解決這個問題,我把該行的高度在CSS並添加0填充:

.title { 
    height: 45px; 
    padding: 0px; 
} 

在包括表標題錶行,然後添加填充表。 現在我可以有45px高度+ 10px填充,標題行保持45px(而不是55)。