1. 首頁
  2. 問答
  3. 鉻與FF/IE /歌劇計算表格單元格寬度？ （表格佈局：固定）

鉻與FF/IE /歌劇計算表格單元格寬度？ （表格佈局：固定）

2010-08-31 45 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
伯尼

來源

2010-08-31 berny

+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，只是爲了找到你提到的一個小問題。

來源

2010-08-31 01:43:20

0

的原因可能是兩者之一：

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

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

來源

2010-11-12 12:46:55 boze

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>

來源

2011-09-20 08:40:04

0

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

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

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

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

來源

2012-09-30 10:40:02 lonewulf

相關問題

 相關問題