IE8怪異模式表格標題

我覺得這是一個基本的問題，但在這裏找不到解決方案。IE8怪異模式表格標題

我有一個HTML頁面顯示在IE8（怪癖模式）。可悲的是，標題沒有使用他們應該的所有空間，並且顯示在幾行而不是一行上。相同的html源碼在chrome/firefox上工作，但不能在ie上使用怪異模式。

我應該怎麼做才能在IE8上得到chrome的結果？不需要多瀏覽器支持，只需要IE8。

文件：

<html> 
<head> 
<style type="text/css"> 
.color5 {background-color:#DBEAF5;font-family:arial;font-size:8pt;font-weight:normal;} 
</style> 
</head> 
<body> 
<TABLE WIDTH="100%"  cellpadding=0 cellspacing=1 border=0  class="color6"    > 
  <TR id="ED_ACTIONPLAN1_TR_1"  class="color5" > 
<TD    WIDTH="47" class="color5" ALIGN=CENTER ></TD> 
<TD    WIDTH="86" class="color5" ALIGN=CENTER >Code</TD> 
<TD    WIDTH="285" class="color5" ALIGN=CENTER >Libelle</TD> 
<TD    WIDTH="86" class="color5" ALIGN=CENTER >Priorite</TD> 
<TD    WIDTH="86" class="color5" ALIGN=CENTER >Date de debut effective</TD> 
<TD    WIDTH="109" class="color5" ALIGN=CENTER >Date d'echeance reelle</TD> 
<TD    WIDTH="86" class="color5" ALIGN=CENTER >Taux de realisation</TD> 
</TR> 
</TABLE> 
</body> 
</html>

的圖像是從我的1920×1080屏幕的右上角部分。

鉻：

chrome version

IE8：

IE8 version

來源

2012-09-25 Simon

工作演示你不需要''在你的CSS。此外，您應該使用CSS來代替寬度，而不是使用'width'屬性。 –

爲什麼你的'

'外面有''？ –

@RocketHazmat生成html。我已經做了一些清理，但錯過了這些。請注意。 – Simon

回答

請使用這種風格。

<style type="text/css"> 
    .color5 {background-color:#DBEAF5;font-family:arial;font-size:8pt;font-weight:normal;text-align:center;width:auto;padding:5px} 
</style>

來源

2012-09-25 15:25:36

其實它並沒有解決我的問題：我只是得到更大的列。我希望保持每列寬度。 – Simon

添加類white-space: pre;然後它將在單線在IE

來源

2012-09-25 17:13:46

你的意思是'.color5 {background-color：＃DBEAF5; font-family：arial; font-size：8pt; font-weight：normal; white-space：pre;}'？它也不起作用。 – Simon

的問題是，你是給定值的td元件（其被視爲像素）到具有寬度的表100％（這意味着它的實際像素大小取決於瀏覽器大小）。

IE，舊版本的包裝在指定的固定大小的文本，文本不適合86個也不是109像素..

如果您將您的固定電話號碼，以百分比它的工作原理

所以，您當前的像素值合計爲785個像素。如果你做你的數學你得到這個

<TABLE WIDTH="100%" cellpadding=0 cellspacing=1 border=0 class="color6"> 
    <TR id="ED_ACTIONPLAN1_TR_1" class="color5" > 
     <TD WIDTH="6.02%" class="color5" ALIGN=CENTER ></TD> 
     <TD WIDTH="10.95%" class="color5" ALIGN=CENTER >Code</TD> 
     <TD WIDTH="36.30%" class="color5" ALIGN=CENTER >Libelle</TD> 
     <TD WIDTH="10.95%" class="color5" ALIGN=CENTER >Priorite</TD> 
     <TD WIDTH="10.95%" class="color5" ALIGN=CENTER >Date de debut effective</TD> 
     <TD WIDTH="13.88%" class="color5" ALIGN=CENTER >Date d'echeance reelle</TD> 
     <TD WIDTH="10.95%" class="color5" ALIGN=CENTER >Taux de realisation</TD> 
    </TR> 
</TABLE>

在http://jsfiddle.net/gaby/4qhPZ/1/embedded/result/

來源

2012-12-22 01:54:55

相關問題