IE8中的表头，开启了怪癖模式答案

【问题标题】：Table header in IE8 with quirks mode onIE8中的表头，开启了怪癖模式
【发布时间】：2017-10-08 01:13:49
【问题描述】：

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

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

我应该怎么做才能在 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 屏幕的右上角。

铬：

IE8：

【问题讨论】：

您不需要在 CSS 周围使用 。此外，您应该使用 CSS 作为宽度，而不是使用 width 属性。
为什么在<TABLE> 之外还有一个</TD>？
@RocketHazmat 生成 html。我做了一些清洁，但错过了那些。感谢 cmets。

标签： html html-table internet-explorer-8

【解决方案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>

【讨论】：

实际上它并没有解决我的问题：我只是得到更大的列。我希望保持每列的宽度。

【解决方案2】：

在类中添加white-space: pre; 然后它将在 IE 中单行

【讨论】：

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

【解决方案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/

【讨论】：