带有 colspan 集的 Internet Explorer 8 表格单元格宽度错误
Posted
技术标签:
【中文标题】带有 colspan 集的 Internet Explorer 8 表格单元格宽度错误【英文标题】：Internet Explorer 8 table cell width bug with colspan set 【发布时间】：2011-01-25 15:25:37 【问题描述】：我有以下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”的单元格的宽度为 100 像素，并且它的相邻单元格填满了表格的其余部分。在 internet explorer 8 中，它有点大，它的大小取决于设置 colspan="2" 的单元格中有多少文本。 IE 中是否有修复此错误的方法？
【问题讨论】：
我有没有提到我讨厌 Internet Explorer？不？好吧，让它知道。 我会 +1 以获得可理解的错误描述、正确的测试用例以及正确使用code 按钮的第一时间，但我今天没有票了 :) 其他人会这样做请给我。
+1 因为 Pekka 已经提供了原因 :)
【参考方案1】：
这是我在 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>
【讨论】：
啊，太好了！这也有效。我在上面发布的示例中对其进行了测试，并且有效。所以添加 style="width: 100%;"到带有 colspan="2" 的表格单元格也可以解决问题。 也将它设置为元素的宽度为我修复它。【参考方案2】：使用setAttribute 函数。属性Name = "colSpan"。这也适用于 IE 8 和 Firefox。
示例：
cell.setAttribute("colSpan", 9);
【讨论】：
【参考方案3】：Luke 对“table-layout:fixed”的回答最终为我做了。如果没有“table-layout:fixed”，IE 将继续忽略非 colspan 单元格的显式宽度声明。有了它，一切正常，尽管必须明确告诉所有非 colspan 单元格的宽度是多少，而不是像地球上其他所有浏览器一样向左流动。
最终成绩： 卢克：+1 IE：吸吧。
【讨论】：
【参考方案4】：如果您将第一个 td（colspan="2" 的那个）的宽度设置为 100 像素，那么您将获得您想要的行为，至少对于这个测试用例而言。
据我所知，根据 CSS 2.1 规范，IE8 行为是正确的：http://www.w3.org/TR/CSS2/tables.html#width-layout 第 17.5.2.2 节自动表格布局。第 3 步看起来很可疑。
但是，这可能是一个规范错误，因为很多细节看起来都非常模糊。 CSS 3 中的算法看起来更加细致。
编辑：这也适用于您的第二个测试用例。
【讨论】：
【参考方案5】：好吧，这纯粹是精神错乱。 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>
由于某种原因，将输入元素放在第一个表格单元格中会使 Ray 的解决方案不太有效。
最终解决了我们试图修复的实际情况的解决方案需要将“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 是解决我的类似问题所需的魔术。谢谢！
我的第一行不是 0px 高吗？！ :o【参考方案6】：
由于您知道表格的大小 (700)，因此您可以通过设置第二行中两个单元格的宽度来解决该错误。将第二个单元格设置为 600 像素，表格的行为。
但它仍然很糟糕。
编辑 - 这是另一个糟糕的解决方法 - 将空白图像添加到第一个单元格以强制大小，然后将 100% 的宽度添加到 xsecond 单元格：
<tr>
<td style="width: 100px; border: solid 1px purple;" >x<img src="\images\blank.gif" /></td>
<td style="border: solid 1px blue;width:100%;">Some sample text</td>
</tr>
【讨论】：
您的答案肯定适用于这个简化的测试用例。但是，我尝试将其应用于我真实网站上的大量 html，并遇到了同样的问题，只是略有不同。请参阅下面的答案...以上是关于带有 colspan 集的 Internet Explorer 8 表格单元格宽度错误的主要内容，如果未能解决你的问题，请参考以下文章
带有开始时间的 HTML5 视频播放器在 Internet Explorer 上不起作用
带有合并单元格的表格无限滚动（定义的 colspan/rowspan）