logo标签列表

使用colspan属性设置的Internet Explorer 8表格单元格宽度错误

htmlcssinternet-explorer
42

我有以下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中此错误的方法？

23
我提到过我非常讨厌Internet Explorer吗？没提到？那就让大家知道一下。 - Luke
4
我赞成提供易懂的错误描述、适当的测试用例和正确使用“代码”按钮，但今天我已经没有投票机会了 :) 请有人替我完成这项任务。 - Pekka
+1 是基于 Pekka 提供的原因而给出的。 - Peter Lang
6个回答
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
谢谢你解决了这个问题。也帮助了我。 - KIR
1
“table-layout: fixed” 是我解决类似问题的魔法技巧。谢谢！ - Dimitar
我的第一行高度不是0像素？！ :o - EricG
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>
1
太好了！这也行。我在上面发布的示例上进行了测试，它可以工作。因此，在具有colspan="2"的表格单元格中添加style="width: 100%;"也可以解决问题。 - Luke
同时将其设置为元素的宽度对我有用。 - chourobin
4
使用“table-layout:fixed”属性是让我最终解决问题的方法。如果没有此属性，IE将继续忽略非colspan单元格的显式宽度声明。有了它，尽管不像其他浏览器一样顺畅地向左流动，但所有非colspan单元格都能按照显式宽度正常工作。
最终得分： Luke：+1 IE：滚粗。
1
使用setAttribute函数。属性Name = "colSpan"。这适用于IE 8和Firefox。
示例：

cell.setAttribute("colSpan", 9);
0

由于您知道表格的大小（700），因此可以通过设置第二行中两个单元格的宽度来解决错误。将第二个单元格设置为600像素，表格就会正常工作。

但它仍然很糟糕。

编辑 - 这里是另一个糟糕的解决方法 - 在第一个单元格中添加一个空白图像以强制其大小，然后在第二个单元格中添加100％的宽度：

<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>
你的回答对于这个简化的测试用例确实有效。然而，我尝试将其应用到我的真实网站上杂乱无章的大量HTML代码中，遇到了同样的问题，只是稍有不同。请参见下面的我的回答... - Luke
0
如果您将具有colspan="2"的第一个td（宽度为100px），那么您将得到所需的行为，至少对于此测试案例而言。
就我所知，根据CSS 2.1规范在这里（http://www.w3.org/TR/CSS2/tables.html#width-layout第17.5.2.2节）IE8的行为是正确的。第3步看起来可疑。
然而，这可能是一个规范错误，因为关于许多细节似乎很模糊。CSS 3中的算法更加详细规定。
编辑：这个方法也适用于您的第二个测试案例。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接