可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a layout with a menu DIV on the left. This is floated left with a fixed EM width. I then have a content DIV which has a left margin of more than the menu's width. So it sits nicely to the right of the menu and fills up the remaining space with both menu and content lined up perfectly.

However, in Internet Explorer 6, if the content gets too wide it falls down below the menu. which means you have loads of whitespace and can't actually see any of the content at all without scrolling.

Unfortunately I am not able to make changes to the content - this is a redesign of a site hosting 3rd party content, and changing that content is outside the scope of what I can do.

Also, there is a footer bar that must be underneath both the menu and the content.

I managed to almost get it to work by providing IE6 with a different layout using absolute positioning - unfortunately the footer looks rubbish and as IE6 is the 2nd most used browser on our site I can't really go with that.

I also tried messing around with overflows but ended up causing problems with random scrollbars appearing all over the place which wasn't any good either.

Does anyone know if there is a simple non-Javascript way of doing this that will work in IE6 as well as "proper" browsers? I'm currently thinking that it will have to be a table based layout.

Here's an example of the problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <style type="text/css">
            .menu {
                width: 14em;
                float: left;
            }

            .content {
                margin-left: 15em;
                zoom: 1;
            }

            .footer {
                clear: both;
            }

             /* styling to make the demo more obvious */
            .menu {
                background-color: #f99;
            }
            .content {
                background-color: #9f9;
            }
            .footer {
                background-color: #99f;
            }
            td {
                border: 1px solid #000;
            }
        </style>
    </head>

    <body>

    <div class="container">
        <div class="menu">
            <ul>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
            </ul>
        </div>

        <div class="content">
            <h1>Main Content</h1>
                <table>
                    <tr>
                        <td>this is a really</td>
                        <td>wide table which</td>
                        <td>I am using to push</td>
                        <td>the content down</td>
                        <td>need to keep going</td>
                        <td>so that it breaks</td>
                        <td>in ie6</td>
                        <td>but naturally</td>
                        <td>nothing else</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="footer">
            <p>Copyright blah blah blah</p>
        </div>
    </body>
</html>

回答1:

As you mentioned you already tried position absolute. But I'll tried the following and it might work for you. Here is the CSS:

.container {
    position:relative;
}
.menu {
    width: 14em;
    position:absolute;
    top: 0;
    left: 0 !important;
    left: -15em;
}

.content {
    margin-left: 15em;
}
.footer {
}

Some explanation: The menu is positioned absolute, independent of the other content. However, IE puts the menu relative to the "content" div, and hides it behind the "content" div. The work around is to position it negatively, just as many em's to the left as the content div has "margin-left". But this should only done for IE, so therefor the "left 0 !important" is added (but before the negative left), which works because IE ignores "!important" while the other browers do acknowledge it and will use "left 0".

Update:

As Alohci notes a better way would be to use the "* html" hack, in that case the CSS for "menu" becomes:

.menu {
    width: 14em;
    position:absolute;
    top: 0;
    left: 0;
}

* html .menu {
     left: -15em;
}

回答2:

Why not use an established layout for eg http://layouts.ironmyers.com/

or you might want to investigate this css overflow

Have a look at this, does it help?

EDIT:

Try one of these fixes: (you could use some conditional code like @Blake suggested)

overflow:scroll -- this makes sure your content can be seen at the cost of design (scrollbars are ugly)

overflow:hidden -- just cuts off any overflow. It means people can't read the content though.

.content {
        margin-left: 15em;
        zoom: 1;
        overflow:scroll  
        /* overflow:hidden */ /* probably second best */
}

Try looking at this one How to prevent long words from breaking my div? is this your problem?

回答3:

Use some conditional comments for IE6 to read and place in the necessary CSS to fix the width of the problematic divs like so:

<!--[if IE 6]>
IE 6 specific stuff goes here. You can load a specific stylesheet here, or just have inline css
<![endif]-->

You can read more on the conditional comments here.

回答4:

Removing the zoom: 1; makes it work just fine for me in IE6.

回答5:

Too late, but usually i get flots fixed by adding or an absolute width (a number in pixels, points or any hard measure system instead on em, % and so) or sometimes to put a min-width property solves it, also, beware of padding and borders because of the boxmodel sum.

回答6:

I have run into this so many times that I just try to stay away from floats entirely. That said, there are some things you can do to make them work, but you might have to settle for a fixed with layout and/or some IE6 specific fixes. Here are some things you can try:

This may sound like heresy but tables are not wrong for layout, they're just not cool.
Try setting the 'container' div with a fixed width and auto margins.
If that doesn't work, try a fixed width 'content' div with your fixed width 'container' div.

回答7:

THanks for the position:absolute idea. This is similar to one solution I almost went with.

The problem here is that the menu will overlay the footer if the menu is longer than the content (and it quite often is). I could try to add an arbitrary height to the content to try to force a minimum height, but I won't really know how big the menu will be. There's the potential for quite a lot going down the side panel in that area.

I presume there's no way to force the relative positioned container to grow in response to the absolute positioned content, is there? Even if it's an IE6 hack, as I can use the float method for other browsers.

(Again, sorry for not posting this as a comment but I don't get that as an option)