关于跨浏览器:嵌套 DIV – 如何使其适用于 Internet Explorer 7?

Nested DIVs - How to make it work for Internet Explorer 7?

嵌套的 div;在 Firefox-Opera-Safari 中完美运行,如何使其适用于 IE7?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
   
   
    Heading
   
   
    Scrillablecontentblaa<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
   
   
    <img src="grippie.png" style="margin-left: auto; margin-right: auto; display: block;"/>

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

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


"工作"?它的确切问题是什么?

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

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


是一个没有明确宽度的浮动 div。我认为在这种情况下,浏览器可以随意解释宽度。

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