Nested DIVs - How to make it work for Internet Explorer 7?_问答_开发者

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

开发者 https://www.devze.com 2022-12-10 09:05 出处：网络

Nested divs; works perfectly in Firefox-Opera-Safari, how to make it work for IE7? <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"

Nested divs; works perfectly in Firefox-Opera-Safari, how to make it work for 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 conten开发者_运维知识库t
    </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>

What I want: minimum width, that's why I use float. I am building a custom "drop down menu" and I don't want it to expand to the whole page and I want it to fit the longest string.

In my own IE7 browser it stretches and fills the whole page. In all other browsers (FF,Safari,Opera, probably ie8) it works nicely and fits to "minimum width".

“Work”? What's the exact issue with it?

For me, it renders mostly the same as Firefox et al in IE7, as long as the document has a suitable Standards Mode DOCTYPE. I do see a problem where it adds a horizontal scrollbar, which you can fix by adding something like overflow-x: hidden; padding-right: 24px; on the content div.

(The problem being that by doing a float without an explicit width, you have asked for shrink-to-fit-content-width behaviour, but the exact content width is dependent on whether there's a scrollbar on the content div, which IE can't know without knowing if the content scrolls, which is in turn dependent on the parent's content-width. This catch-22 is why IE gets confused; in Quirks Mode it totally gives up and makes the float full-width. This is why shrink-to-fit floats should be used with caution. If you set an explicit width on the floated element there would be no difficulty.)

<div id="test-div-two"> is a floated div without an explicit width. I think browsers are free to interpret the width any way they want in this case.

If you specify a width (e.g. width:50px;), it looks the same on all browsers.