Question

考虑这个（剪切）示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">>
<body>
    <table style="background-color: Navy; width:400px">
        <tr>
            <td style="background-color: Green; width:35px">test</td>
            <td style="background-color: Green; width:35px">test</td>
            <td style="background-color: Green; width:35px">t</td>
            <td style="background-color: Green">buffer</td>
        </tr>
        <tr>
            <td colspan="4">
                <img src="http://www.tiepvoud.nl/archief/boris_jeltsin.jpg" alt="Product Mixing Gauges" width="400" />
            </td>
        </tr>
    </table>
</body>
</html>

这在IE浏览器的所有浏览器中都运行良好。如果图像足够小（比如说40），一切都很好。当图像的大小稍大（比如说200）时，IE开始让单元格宽度变大发生了什么事？

- 旁注 -
对于建议使用CSS的人。我知道。这是一个抽象的例子。表仍然是有效的HTML，不应该担心。表格数据应该在表格中。使用div重新创建表格至少与创建基于表格的布局一样严重。

Answer 1

如果你硬编码第4列的宽度，它按预期工作......

...
<td style="background-color: Green; width:295px">buffer</td>
...

它会忽略colspan属性，因此如果图像的宽度比第一列更宽，则它会全部混合。搜索“IE6 colspan bug”...

[编辑：] 如果你必须使用表格，那么（不漂亮）可能会起作用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">>
<body>
    <table style="background-color: Navy; width:400px">
        <tr>
          <td>
            <table width="100%">
              <tr>
                <td style="background-color: Green; width:35px">test</td>
                <td style="background-color: Green; width:35px">test</td>
                <td style="background-color: Green; width:35px">t</td>
                <td style="background-color: Green">buffer</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <img src="http://www.tiepvoud.nl/archief/boris_jeltsin.jpg" alt="Product Mixing Gauges" width="400" />
          </td>
        </tr>
    </table>
</body>
</html>

让我想起this

但我真的认为你应该使用CSS 进行布局!!!

Answer 2

试试这个：

<style type="text/css">table {table-layout: fixed;}</style>

它应该有效，这种情况只发生在我认为的IE6中（不适用于IE7和IE8）

或者您可以在第4栏中使用width：auto

<td style="background-color: Green; width: auto;">buffer</td>

顺便说一下，我希望你没有使用上面的代码来创建一个基于表格的布局（这是旧时尚，嘿，你应该今天学习基于CSS的布局）

Answer 3

您在<html>标记

上方指定的DOCTYPE（如果有）

如果将其更改为

，是否有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

OR

<!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" xml:lang="en" lang="en">

Answer 4

尝试在一些内容上设置溢出 CSS属性，例如表格

例如：<table style="background-color: Navy; width:400px;**overflow: hidden**">

Answer 5

有一个名为960的基于CSS的网格系统易于学习，适用于IE，FF和Sarari。它将有助于强制执行您定义的列跨度并创建更清晰的标记。这是一个很好的tutorial。

起初我很怀疑，因为我是一个古老的ASP.NET人员，但它为我节省了大量维护和跨浏览器问题的时间。我还发现通过使用较少的表，我可以更快地合并更多的客户端功能。这是一个明确的加分。

当涉及colspan时，为什么IE忽略单元格宽度？

5 个答案: