Html 带有 colspan 设置的 Internet Explorer 8 表格单元格宽度错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2412692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer 8 table cell width bug with colspan set
提问by Luke
I have the following html page:
我有以下 html 页面：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>A title</title>
</head>
<body>
<table style="width: 700px; border: solid 1px green">
<tr>
<td style="border: solid 1px red;" colspan="2">A cell with a bunch of text. The amount of text here increases the 'x' cell.<td>
</tr>
<tr>
<td style="width: 100px; border: solid 1px purple;" >x</td>
<td style="border: solid 1px blue;">Some sample text</td>
</tr>
</table>
</body>
</html>
In all browsers other than Internet Explorer (8), the cell with contents "x" has a width of 100px, and it's adjacent cell fills the rest of the table. In internet explorer 8, it's quite a bit bigger, and it's size varies depending on how much text is in the cell with colspan="2" set. Is there a fix for this bug in IE?
在除 Internet Explorer (8) 之外的所有浏览器中，内容为“x”的单元格的宽度为 100px，并且它的相邻单元格填充了表格的其余部分。在 Internet Explorer 8 中，它要大得多，其大小取决于设置 colspan="2" 的单元格中的文本数量。IE 中是否有针对此错误的修复程序？
采纳答案by Libor Sko?ík
Here is my result for failed tdwidth in IE8:
这是我td在 IE8 中宽度失败的结果：
<table style="width: 100%;" border="1">
<tr>
<td style="width:auto;">td1</td>
<td style="width:15px;">td2</td>
<td style="width:20px;">td3</td>
</tr>
<tr>
<td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
</tr>
</table>
<!-- IE8 HACK 100% WIDTH -->
<table style="width: 100%;" border="1">
<tr>
<td style="width:100%;">td1</td>
<td style="width:15px;">td2</td>
<td style="width:20px;">td3</td>
</tr>
<tr>
<td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
</tr>
</table>
回答by Luke
Ok, this is pure insanity. Ray's answer worked for the initial test, but not for my real life example, which led me to create a second test case with Ray's fix:
好吧，这纯粹是疯了。Ray 的回答适用于初始测试，但不适用于我的现实生活示例，这导致我使用 Ray 的修复程序创建了第二个测试用例：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>title</title>
</head>
<body>
<form>
<table style="width: 700px;">
<tr>
<td colspan="2">Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
</tr>
<tr>
<td style="width:100px; background: green;"><input type="checkbox" value="1" /></td>
<td style="width:600px;">blah</td>
</tr>
</table>
<table style="width: 700px;" border="0">
<tr>
<td colspan="2">Some short text</td>
</tr>
<tr>
<td style="width: 100px; background: red;"><input type="checkbox" value="1" /></td>
<td style="width: 600px;">blah</td>
</tr>
</table>
</form>
</body>
</html>
For some reason, having the input elements within the first table cell makes Ray's solution not quite work.
出于某种原因，将输入元素放在第一个表格单元格中会使 Ray 的解决方案不太有效。
The solution that did end up solving the real world case we were trying to fix required adding "table-layout:fixed" to the tables, and making the first row in the table have empty cells with the width's set. Here's a modified version of the previously example with the fix I just described:
最终解决了我们试图修复的现实世界案例的解决方案需要向表格添加“table-layout:fixed”，并使表格中的第一行具有设置宽度的空单元格。这是先前示例的修改版本，其中包含我刚刚描述的修复程序：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>title</title>
</head>
<body>
<form>
<table style="table-layout: fixed; width: 700px;">
<tr>
<td style="width: 100px;"></td>
<td style="width: 600px;"></td>
</tr>
<tr>
<td colspan="2">Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
</tr>
<tr>
<td style="background: green;"><input type="checkbox" value="1" /></td>
<td>blah</td>
</tr>
</table>
<table style="width: 700px; table-layout: fixed;" border="0">
<tr>
<td style="width: 100px;"></td>
<td style="width: 600px;"></td>
</tr>
<tr>
<td colspan="2">Some short text</td>
</tr>
<tr>
<td style="background: red;"><input type="checkbox" value="1" /></td>
<td>blah</td>
</tr>
</table>
</form>
</body>
</html>
Really Internet Explorer??? REALLY?
真的是IE浏览器？？？真的吗？
回答by ogradyjd
Luke's answer with the "table-layout:fixed" is what finally did it for me. Without "table-layout:fixed", IE continued to ignore the explicit width declarations for the non-colspan cells. With it, everything worked, albeit by having to explicitly tell all the non-colspan cells what their width is instead of just flowing to the left like every other browser on the planet.
卢克对“表格布局：固定”的回答是最终为我所做的。如果没有“table-layout:fixed”，IE 继续忽略非 colspan 单元格的显式宽度声明。有了它，一切都正常了，尽管必须明确告诉所有非 colspan 单元格它们的宽度是多少，而不是像地球上的所有其他浏览器一样向左流动。
Final Score: Luke: +1 IE: Suck it.
最终得分：卢克：+1
回答by Sanath Nair
Use the setAttributefunction. Attribute Name = "colSpan". This works on IE 8 and Firefox also.
Example :
使用该setAttribute功能。属性Name = "colSpan"。这也适用于 IE 8 和 Firefox。
例子 ：
cell.setAttribute("colSpan", 9);
回答by Ray
Since you know the size of the table (700) you can work around the bug by setting the width of both cells in the second row. With the second cell set to 600 px, the table behaves.
由于您知道表格的大小 (700)，您可以通过设置第二行中两个单元格的宽度来解决该错误。将第二个单元格设置为 600 像素后，表格将正常运行。
But it still sucks.
但它仍然很糟糕。
Edit - here is another sucky workaround - add a blank image to the first cell to force the size, then add width of 100% to the xsecond cell:
编辑 - 这是另一个糟糕的解决方法 - 将空白图像添加到第一个单元格以强制调整大小，然后将 100% 的宽度添加到 xsecond 单元格：
<tr>
<td style="width: 100px; border: solid 1px purple;" >x<img src="\images\blank.gif" width="100" height="1" /></td>
<td style="border: solid 1px blue;width:100%;">Some sample text</td>
</tr>
回答by Alohci
If you set the width of the first td (the one with colspan="2") to be 100px, then you get the behaviour you want, at least for this test case.
如果您将第一个 td（colspan="2" 的那个）的宽度设置为 100px，那么您将获得所需的行为，至少对于这个测试用例。
As far as I can tell the IE8 behaviour is correct according to CSS 2.1 spec here: http://www.w3.org/TR/CSS2/tables.html#width-layoutsection 17.5.2.2 Automatic table layout. Step 3 looks suspicious.
据我所知，根据此处的 CSS 2.1 规范，IE8 的行为是正确的：http: //www.w3.org/TR/CSS2/tables.html#width-layoutsection 17.5.2.2 Automatic table layout。第 3 步看起来很可疑。
However, this is probably a spec bug, since it all seems very vague about many details. The algorithm in CSS 3 looks much more carefully specified.
然而，这可能是一个规范错误，因为它对许多细节似乎都很模糊。CSS 3 中的算法看起来更仔细地指定。
EDIT: This also works with your second test case.
编辑：这也适用于您的第二个测试用例。
