類似的表在歌劇和IE7看起來不同

我試圖實現一個基本的固定表頭效果。爲此，我使用兩個完全相同的標記和CSS表。「內容」表格在帶有溢出-y集的div中。一切看起來都很好，除了IE7和Opera，其中「header」表的列寬與「content」表不同。類似的表在歌劇和IE7看起來不同

這裏是一個的jsfiddle：http://jsfiddle.net/gEtGW/1/

請讓我知道如果你有關於這一點的想法。

謝謝！

編輯：

來源

2011-09-25 lucassp

-1

我有這個確切的同樣的問題，我第一次嘗試解決這個問題你在做同樣的方式。但是這並沒有帶來任何好處 - 僅僅是因爲你看到了各種各樣的瀏覽器問題。我花了幾天和幾天的時間嘗試做對。我終於放棄了兩張桌子的方法。相反，我使用表頭材質創建了一個div，從內容表的第一行計算每個頭元素的寬度。它在所有瀏覽器中都完美無瑕。我提出了一個像你的問題over here on SO。你可能想看看它。

這裏是the table using the new scheme.

HTH

來源

2011-09-25 21:41:25

在你的HTML，你有這...

<table class="inner-table"> 
    <colgroup> 
     <col width="83"> 
     <col width="92"> 
     <col width="123"> 
     <col width="120"> 
     <col width="177"> 
     <col width="84"> 
    </colgroup>

如果上述所有的寬度加起來679總。

然而，在你的CSS，你有這...

.inner-table { 
    width: 680px; 
}

我不知道每個瀏覽器應該有額外的/丟失的像素或他們如何決定是否做一個像素差異是一個額外的像素或缺少一個像素。 679對680 ...哪一個優先？

雖然，我敢肯定每個瀏覽器都可能會以不同的方式呈現。

來源

2011-09-25 20:50:57 Sparky

他有一個1px的右邊框。那麼這個寬度我認爲沒關係。 –

@ A.Quiroga，將1像素右邊界應用於'colgroup'之外的'thead'內的所有**'th'元素。這只是增加了另外6個像素。無論哪種方式，將HTML屬性與CSS樣式混合可能是此渲染差異的根源。 – Sparky

我只添加了寬度，因爲Opera例如在容器增長的情況下擴展了表格：（ – lucassp

確定發現問題（該問題是一個文本樣式之一）：

「列」文本正在列的邊界CELD改變

例如改變「列中的」關於「COL」和你看到這樣的：

http://jsfiddle.net/qYnPU/

來源

2011-09-25 21:37:49

是的，非常奇怪。文字大小遠不及列的寬度。我將根據div或ul製作不同的表頭。 – lucassp

那麼爲什麼不打勾？ ¬_¬ –

類似的表在歌劇和IE7看起來不同

回答

相關問題