Question

我觉得这是一个基本问题，但在这里找不到解决方案。

我有一个在IE8上显示的html页面（怪癖模式）。可悲的是，标题没有使用它们应该占用的所有空间，并且显示在多行而不是一行。相同的html源代码适用于chrome / firefox，但不适用于带有怪异模式的ie8。

如何在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>

图像来自我1920x1080屏幕的右上角。

铬：

chrome version

IE8：

IE8 version

Answer 1

请使用这种风格。

<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>

Answer 2

在课堂上添加white-space: pre;然后它将在IE

中以单行显示

Answer 3

问题在于，您将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/

IE8中的表头与怪异模式打开

3 个答案: