嵌套 DIV - 如何使其适用于 Internet Explorer 7？答案

【问题标题】：Nested DIVs - How to make it work for Internet Explorer 7?嵌套 DIV - 如何使其适用于 Internet Explorer 7？
【发布时间】：2010-12-14 10:48:08
【问题描述】：

嵌套的 div；在 Firefox-Opera-Safari 中完美运行，如何使其适用于 IE7？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
    <div id="test-div-two" style="border: 1px solid magenta; float:left; margin: 2px;">
    <div style="height: 20px; background: rgb(232,238,224); margin: 2px;">
    Heading
    </div>
    <div id="test-div-two-content" style="border: 1px solid black; height: 100px; overflow-y: auto; background: white; margin: 2px;">
    Scrillable&nbsp;content&nbsp;blaa<br/>
    Scrillable content content content <br/>
    Scrillable content <br/>
    Scrillable content blaa<br/>
    Scrillable content <br/>
    Scrillable content <br/>
    Scrillable content <br/>
    Scrillable content <br/>
    Scrillable content <br/>
    Scrillable content <br/>
    Scrillable content
    </div>
    <div style="border: 1px solid red; background: rgb(238,238,238); margin: 2px;">
    <img src="grippie.png" style="margin-left: auto; margin-right: auto; display: block;"/>
    </div>
    </div>

我想要的是：最小宽度，这就是我使用浮动的原因。我正在构建一个自定义“下拉菜单”，我不希望它扩展到整个页面，我希望它适合最长的字符串。

在我自己的 IE7 浏览器中，它会拉伸并填满整个页面。在所有其他浏览器（FF、Safari、Opera，可能是 ie8）中，它运行良好并且适合“最小宽度”。

【问题讨论】：

我不认为嵌套的<div /> 标签是这里的问题。我认为这与您的 CSS 有更多关系。
你能解释一下问题是什么吗？我在 IE8（兼容性视图）和 Firefox 中尝试过，看起来都很好（除了 IE 中的表格跨越了页面的整个宽度）。
XHTML 1.0 Transitional 问题正是“在 IE 中跨越页面的整个宽度”。这不是我想要的。
顺便说一句：我在那里添加了标签，这似乎使情况变得更糟。我需要把夹子放在中心。

标签： internet-explorer-7 cross-browser html

【解决方案1】：

“工作”？它的确切问题是什么？

对我来说，只要文档有合适的Standards Mode DOCTYPE，它的呈现方式与 IE7 中的 Firefox 等几乎相同。我确实看到了添加水平滚动条的问题，您可以通过在内容 div 上添加类似 overflow-x: hidden; padding-right: 24px; 的内容来解决此问题。

（问题是通过在没有明确的width 的情况下执行float，您已经要求缩小以适应内容宽度的行为，但确切的内容宽度取决于是否有滚动条内容 div，IE 不知道内容是否滚动就无法知道，这又取决于父级的内容宽度。这个 catch-22 是 IE 感到困惑的原因；在 Quirks 模式下，它完全放弃并使浮动充满-width。这就是为什么要谨慎使用缩小以适应浮动的原因。如果在浮动元素上设置显式宽度，则不会有任何困难。）

【讨论】：

我需要的是收缩配合。我想让它与 ie7 和 XHTML 1.0 Transitional 一起工作（否则我将不得不更改整个网络应用程序 dtd）。
XHTML 1.0 Transitional 是一个非常好的标准模式文档类型，是的。检查您是否将其放在文档的顶部，之前没有其他内容。做javascript:alert(document.compatMode)看是否已经占用（应该是CSS1Compat）。
当然； ) 它适用于您的 ie7 吗？注意底部的 img 标签 display: block （使其居中）
为什么是display: block 恶作剧？当然只是在父级div 上带有text-align: center 的普通图像是最简单的吗？
在 FF 中无论是 display: block 还是 text-align center 都没有区别。但是在 ie7 中，文本对齐中心再次使页脚 div 比 img 高得多。看起来不太好。

【解决方案2】：

<div id="test-div-two"> 是一个没有明确宽度的浮动 div。我认为在这种情况下，浏览器可以随意解释宽度。

如果你指定一个宽度（例如width:50px;），它在所有浏览器上看起来都是一样的。

【讨论】：

在 CSS 2.0 中，没有宽度的浮点数将与非浮点数具有相同的宽度，即。它将是全宽减去边框和填充。然而，只有 IE5/Mac 真正做到了这一点；其他浏览器进行了各种版本的缩小以适应，然后 CSS 2.1 将其作为标准（尽管不是以完全明确的方式）。
顺便说一句：我在那里添加了标签，这似乎使情况变得更糟。我需要把夹子放在中心。