Internet Explorer 8表格单元格宽度bug与colspan集
我有以下的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> 在Internet Explorer（8）以外的所有浏览器中，内容为“x”的单元格的宽度为100px，并且相邻的单元格将填充表格的其余部分。 在Internet Explorer 8中，它比较大，它的大小取决于设置了colspan =“2”的单元格中的文本的大小。 有没有解决这个错误在IE浏览器？
这是我在IE8中失败的td宽度的结果：
<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>
好吧，这是纯粹的疯狂。 Ray的答案适用于最初的testing，但不适合我现实生活中的例子，这导致我用Ray的解决scheme创build了第二个testing用例：
<?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>
出于某种原因，在第一个表格单元格中包含input元素使得Ray的解决scheme不能工作。
最终解决了我们试图修复的真实案例的解决scheme需要在表中添加“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>
真的是Internet Explorer？ 真？
卢克对“桌面布局：固定”的回答终于为我做了。 没有“table-layout：fixed”，IE继续忽略非colspan单元格的显式宽度声明。 有了它，一切工作，虽然必须明确告诉所有非colspan细胞，他们的宽度是什么，而不是像meteor在其他所有浏览器一样stream向左侧。
最终得分：卢克：+1 IE：吸。
使用setAttribute函数。 属性Name = "colSpan" 。 这也适用于IE 8和Firefox。
例如：
cell.setAttribute("colSpan", 9);
既然你知道表（700）的大小，你可以通过在第二行中设置两个单元格的宽度来解决这个问题。 第二个单元格设置为600像素，表格的行为。
但它仍然很糟糕。
编辑 – 这里是另一个糟糕的解决方法 – 向第一个单元格添加一个空白图像强制大小，然后将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>
如果将第一个td（colspan =“2”的那个）的宽度设置为100px，那么至less在此testing用例中，您会得到所需的行为。
据我可以告诉IE8的行为是正确的根据CSS 2.1规范在这里： http : //www.w3.org/TR/CSS2/tables.html#width-layout部分17.5.2.2自动表格布局。 第3步看起来很可疑。
但是，这可能是一个规格错误，因为它似乎很多细节都很模糊。 CSS 3中的algorithm看起来更加仔细。
编辑：这也适用于你的第二个testing用例。
