【问题标题】:Different handling table td-height in IE vs. all others?IE 中的不同处理表 td-height 与所有其他表?
【发布时间】:2011-12-03 02:24:53
【问题描述】:

我在所有 Internet Explorer 版本中的 TABLES 都有问题,或者说是 TD 的高度让我抓狂。

我有以下标记

<table>
    <tbody>
        <tr style="vertical-align:top;">
            <td id="TD1" width="35" colspan="2" style="background-color:yellow; height:1%;">
                <div id="DIV1" style="height:10px; background-color:red;"></div>
            </td>
            <td id="TD2" width="15" rowspan="2" style="height:99%;">
                <div id="DIV2" style="height:160px; background-color:green;"></div>
            </td>
        </tr>
        <tr style="vertical-align:top;">
            <td id="TD3" width="25">
                <div id="DIV3" style="height:60px; background-color:blue;"></div>
            </td>
            <td id="TD4" width="10">
                <div id="DIV4" style="height:80px; background-color:orange;"></div>
            </td>
        </tr>
    </tbody>
</table>

为了更好地理解,您可以在 w3schools.com 的 tryit-editor 中执行代码

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_height

我认为这解释了我试图解释的内容:)

虽然 DIV2 的高度小于或等于 DIV1 和 DIV3 或 DIV4 的高度,但它的工作方式与预期相同。但是当 DIV2 的高度大于 DIV1 和 DIV3 或 DIV4 的高度时,IE 以与 TD3 和 TD4 相同的比例上升 TD1。

在所有其他浏览器中,只有 TD3 和 TD4 引发。 TD1 的高度仍然和 DIV1 一样。

有什么想法或解决方法可以解决这个问题吗?

遗憾的是,无表格布局是没有选择的。

【问题讨论】:

  • 首先要检查的是 IE 不是处于 Quirks 模式。另外,您正在测试哪个版本的 IE?
  • 如果没有正确的文档类型,您将永远无法让 IE 尝试像其他更现代的浏览器一样执行。 IE 处于 quirks 模式。
  • @Spudley IE7(兼容模式)、IE8、IE9

标签: html css internet-explorer html-table


【解决方案1】:

如果没有正确的文档类型,您将永远无法让 IE 尝试像其他更现代的浏览器那样执行。 IE 处于怪癖模式。用这个:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者这个:

&lt;!DOCTYPE html&gt;

【讨论】:

  • 我认为文档类型是正确的:ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> w3.org/1999/xhtml" xml:lang="de" lang="de"> document.compatMode 是 CSS1compat
  • @elweilando - 新网页对过渡文档类型没有用处。过渡用于从旧的、已弃用的标记“过渡”。始终使用严格的文档类型。
  • 我尝试了两种声明,但没有任何改变。 Html5 和 xhtml strict 在这种情况下与过渡相同。
  • @elweilando - 还有其他可能触发怪癖模式的事情,但如果没有看到您的实际页面,我们无法了解更多关于正在发生的事情。
  • @elweilando - 第二个文档类型是标准模式文档类型,不应与任何 HTML5 混淆。
猜你喜欢
  • 2013-05-18
  • 1970-01-01
  • 2011-07-04
  • 2018-01-07
  • 1970-01-01
  • 2013-05-18
  • 1970-01-01
  • 2011-10-22
  • 1970-01-01
相关资源
最近更新 更多