Css 表colspan Internet Explorer中的相对宽度问题_Css_Internet Explorer_Html Table_Width

Css 表colspan Internet Explorer中的相对宽度问题

css internet-explorer

Css 表colspan Internet Explorer中的相对宽度问题,css,internet-explorer,html-table,width,Css,Internet Explorer,Html Table,Width,我使用表格生成简单的水平图，以便于缩放。我使用COLSPANGING来获得精确的重叠，有时单元格彼此重叠，但在本例中没有我的问题是IE8渲染的相对单元格宽度错误我知道一个单元格不能小于它的内容，但这不是问题所在例如，示例中的X65单元比IE中的47%宽很多。不过Firefox做得很好以下是一个例子： <html> <body> <style> table.CompAnalysisTable { border-width: 1px;

我使用表格生成简单的水平图，以便于缩放。我使用COLSPANGING来获得精确的重叠，有时单元格彼此重叠，但在本例中没有

我的问题是IE8渲染的相对单元格宽度错误

我知道一个单元格不能小于它的内容，但这不是问题所在

例如，示例中的X65单元比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&nbsp;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&nbsp;7</td>
<td class="nobr" style="width: 1%; background-color: rgb(172, 172, 255);">B&nbsp;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&nbsp;72</td>
<td class="nobr" style="width: 1%; background-color: rgb(255, 152, 152);">B&nbsp;1</td>
</tr>
</table>


</body>
</html>

我尝试过其他技术，比如div和每行单独的表，但是colspan是获得精确重叠的唯一技术

另一个解决方案是在服务器上渲染图像，但是我放松了缩放，这相当耗时

非常感谢您的帮助。

像这样的标题可以让您将其呈现为IE 7，从而省去为IE 8修复它的麻烦：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

除此之外，您可以尝试查看IE 8正在做什么，并使用特定的html条件修复它：

<!--[if IE 8]><![endif]-->

我希望我能帮助更多，但我没有IE 8，所以我看不出问题。也许这些链接可以帮助：

我和你有同样的问题。。。我的解决方案当然是在Jquery中使用一些时髦的javascript；-修正TD宽度的代码

还有一些无用的东西，如果你想要一个宽度为100%，就把它的宽度设置为10000像素

IE、谷歌Chrome和Safari也有同样的问题