我使用表格来生成简单的水平图表(以便于缩放)。 我使用 colspanning 来获得精确的重叠(有时单元格彼此重叠，但在此示例中不是)。
我的问题是 IE(8) 渲染相对单元格宽度错误。
我知道单元格不能小于它的内容，但这不是这里的问题。
例如，示例中的“X 65”单元格比 IE 中的 47% 宽很多。 然而，Firefox 做得很好。
例子如下:
<html>
<body>
<style>
table.CompAnalysisTable {
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: black;
border-collapse: collapse;
background-color: white;
font-size:8px;
}
table.CompAnalysisTable td {
border-width: 1px;
border-style: solid;
border-color: black;
}
table.CompAnalysisTable td table
{
border-style:none;
}
</style>
<table>
<tr>
<td>
</td>
<td class="nobr" valign="middle" align="left">Graph</td>
<td valign="middle" width="100%" align="right">Total 73</td>
</tr>
</tbody>
</table>
<table class="CompAnalysisTable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="nobr" style="width: 47%; background-color: rgb(172, 172, 255);" colspan="65">X 65</td>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 5%; background-color: rgb(172, 172, 255);" colspan="7">A 7</td>
<td class="nobr" style="width: 1%; background-color: rgb(172, 172, 255);">B 1</td>
</tr>
<tr>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 52%; background-color: rgb(255, 152, 152);" colspan="72">A 72</td>
<td class="nobr" style="width: 1%; background-color: rgb(255, 152, 152);">B 1</td>
</tr>
</table>
</body>
</html>
我已经尝试过其他技术，例如 div 和每行的单独表格，但 colspanning 是获得精确重叠的唯一技术。
另一种解决方案是在服务器上渲染图像，但我放宽了缩放比例并且非常耗时。
非常感谢任何帮助。
最佳答案
像这样的 header 可以通过将其呈现为 IE 7 来省去为 IE 8 修复它的麻烦:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
除此之外，您可以尝试查看 IE 8 正在做什么，并使用特定的 html 条件修复它:
<!--[if IE 8]><![endif]-->
我希望我能提供更多帮助，但我没有 IE 8，所以看不到问题。
也许这些链接可以提供帮助:
HTML conditions
Beyond Doctypes
关于css - Internet Explorer 中的表 colspan 相对宽度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1357818/