带有colspan集的Internet Explorer 8表格单元格宽度错误

时间:2010-03-09 21:26:12

标签: html css internet-explorer

我有以下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中有这个错误吗?

6 个答案:

答案 0 :(得分:23)

好的,这是纯粹的疯狂。 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 ???真的?

答案 1 :(得分:13)

以下是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>

答案 2 :(得分:4)

卢克对“表格布局:固定”的回答是最终为我做的。如果没有“table-layout:fixed”,IE继续忽略非colspan单元格的显式宽度声明。有了它,一切都有效,尽管必须明确地告诉所有非colspan单元的宽度是什么,而不是像地球上的其他浏览器一样流向左边。

最终得分: 卢克:+1 IE:吮吸它。

答案 3 :(得分:1)

使用setAttribute功能。属性Name = "colSpan"。这适用于IE 8和Firefox 示例:

cell.setAttribute("colSpan", 9);

答案 4 :(得分:0)

由于你知道表(700)的大小,你可以通过设置第二行中两个单元格的宽度来解决这个问题。将第二个单元格设置为600 px时,表格表现为。

但它仍然很糟糕。

编辑 - 这是另一个糟糕的解决方法 - 将空白图像添加到第一个单元格以强制大小,然后将宽度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> 

答案 5 :(得分:0)

如果将第一个td(colspan =“2”)的宽度设置为100px,那么您将获得所需的行为,至少对于此测试用例。

据我所知,根据CSS 2.1规范,IE8的行为是正确的:http://www.w3.org/TR/CSS2/tables.html#width-layout第17.5.2.2节自动表格布局。第3步看起来很可疑。

然而,这可能是一个规范错误,因为它对许多细节似乎都很模糊。 CSS 3中的算法看起来更加仔细。

编辑:这也适用于您的第二个测试用例。