CSS：当使用float：left来保持我的内容通过其左侧锚定到我的菜单时，菜单在IE中消失

I have a menu of links on the left, and content in the middle. If the content is longer than the links, it will wrap below them instead of staying neatly to the right.

我左边有一个链接菜单,中间有内容。如果内容比链接长,它将包裹在它们下面而不是整齐地保持在右边。

Adding float:left to my content div fixes this, except in IE, where it causes the menu (and the footer) to disappear entirely.

添加float:left到我的内容div修复此问题,除了在IE中,它导致菜单(和页脚)完全消失。

I need to either fix the problem with float:left, or find another way of keeping all my content to the right of the menu.

我需要使用float:left解决问题,或者找到另一种方法将所有内容保存在菜单右侧。

Here's a pared-down version of the html and css code that shows the problem in action. Replace the #content { float:left; } with #content {} to see the original wrapping problem.

这是一个简化的html和css代码版本,显示了行动中的问题。替换#content {float:left;使用#content {}查看原始包装问题。

content {margin:200px;} ALMOST solves this problem -- but the lines that previously would have wrapped are now about 3 pixels further left than those above them, again only in IE.

content {margin:200px;} ALMOST解决了这个问题 - 但之前已经包装的行现在比它们上面的行还要大约3个像素,再次只在IE中。

html:

<HTML><HEAD>
<TITLE>Index</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>
    <DIV id="main">
        <DIV id="nav">
            <A href="link1.html">Link 1</A>
            <A href="link2.html">Link 2</A>
        </DIV>
        <DIV id="content">
            Content<br>
            goes<br>
            here<br>
            and<br>
            sometimes<br>
            wraps<br>
            under<br>
            links
        </DIV>
        <DIV id="footer">
            Footer<BR>
        </DIV>
    </DIV>
</BODY>
</HTML>

css:

* {
    padding: 0;
    margin: 0;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #fff;
}

img { border:0px; } 
body { background-color:#454547; padding: 4px; }
#main { position: relative; top: 20px; }
#nav {
    position: relative;
    left: 0px;
    width: 200px;
    float: left;
    font-weight: bold;
    padding: .25em;
    line-height: 1.25em;
    font-size: 1em;
}
#nav a { display: block; height: 35px; padding: 3px; color:#FFFFFF; }
#nav a:hover { background-color:#CCCCCC; color:#333; }
#footer { width: 100%; clear: both; margin: 0px 0px 10px 0px; padding: 10px; font-size:10px; }
#content { float:left; }

2 个解决方案

#1

find another way of keeping all my content to the right of the menu.

找到另一种方法将所有内容保存在菜单右侧。

#content { margin-left: 200px; }

Consider adding a Standard Mode doctype to reduce the quirkiness of IE.

考虑添加标准模式doctype以减少IE的怪癖。

#2

ok, if you're not happy with my former answer, I'll go through it step by step...

好吧,如果你对我以前的答案不满意,我会一步一步地完成它......

there are very many things you can do wrong with HTML/CSS but there are also a few things you can do right and if you do them right, you will have to worry much less about the things you do wrong. so it's better to learn the few things you can do right and that's why I told you to read the other questions/answers.

你可以用HTML / CSS做很多事情,但也有一些你可以正确做的事情,如果你做得对,你将不得不担心你做错的事情。所以最好学习一些你可以正确做的事情,这就是我告诉你阅读其他问题/答案的原因。

I could tell you to take out the line "position:relative" in your #main div and you would find out that the problem is gone... but I wouldn't because you would not improve your CSS in general.

我可以告诉你在你的#main div中取出“position:relative”行,你会发现问题已经消失了......但我不会因为你不会改善你的CSS。

first of all, use DOCTYPES. whenever possible, use strict like so:

首先,使用DOCTYPES。尽可能使用严格如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

if you think you can't apply strict, use transitional but be aware of the fact that you will already open the spectrum of possible problems again.

如果您认为自己不能严格执行,请使用过渡但要注意这样一个事实,即您将再次打开可能存在的问题。

second: don't apply margins to div tags that contain your content. instaed create a div tag around the content tag and apply the margins there! you may use paddings on the container but no margins.

第二:不要将余量应用于包含您的内容的div标签。 instaed在内容标记周围创建一个div标签并在那里应用边距!你可以在容器上使用填充但没有边距。

third: use a stack of resets in the beginning of your style sheet, there are quite many available, a good set (comes with the yui package by yahoo) which I use for many sites with strict xhtml as follows:

第三:在你的样式表的开头使用一堆重置,有很多可用的,一个很好的设置(由yahoo提供的yui包),我用于许多严格的xhtml网站,如下所示:

@charset "utf-8";
/*
 Copyright (c) 2008, Yahoo! Inc. All rights reserved.
 Code licensed under the BSD License:
 http://developer.yahoo.net/yui/license.txt
 version: 2.6.0
 Adapted by Markus Hausammann
 */
/* reset rules */ * {
    font-size: 100.01%;
    overflow: hidden
}

html, body
{
    color: #313131;
    background-color: #ffffff;
    font-family: Geneva, Arial, Verdana, Helvetica, sans-serif;
    line-height: 1.2em;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

li {
    list-style: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

/* to preserve line-height and selector appearance */
sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/*because legend doesn't inherit in IE */
legend {
    color: #000;
}

del, ins {
    text-decoration: none;
}

/* clearing methods */
/* clearfix method for clearing floats */ .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* essential for Safari browser !! */ .clearfix {
    display: block;
}

/* removes ugly mozilla dotted link borders */
a:active
{
  outline: none;
}

fourth: don't float more than one div into the same direction in order to avoid some IE problems. if you need more than two divs create wrapper divs. so for example for a three column layout you would float your first column left, then a wrapper div with float:right containing the second column floated left (within the wrapper) and the third column floated right within the wrapper... etc. easy but very controllable!

第四:为了避免一些IE问题,不要将多个div浮动到同一个方向。如果你需要两个以上的div来创建包装器div。所以例如对于三列布局,你将浮动你的第一列,然后是一个浮动的包装div:右包含第二列浮动左(在包装器内)和第三列浮动在包装器内...等等容易但非常可控!

former answer:

give a width (maxwidth resp.) to all the divs, float the menu left and the content right. all problems solved. works for percentaged widths too.

给所有div一个宽度(maxwidth resp。),向左浮动菜单,向右浮动内容。所有问题都解决了适用于百分比宽度。

give your main div the attribute inline and your menu div a fixed width.

给你的主div内联属性和你的菜单div固定宽度。

use grids (e.g. http://developer.yahoo.com/yui/grids/ or http://www.blueprintcss.org/)

使用网格(例如http://developer.yahoo.com/yui/grids/或http://www.blueprintcss.org/)

read any of the many other posts about this topic on * (see on the right).

在*上阅读有关此主题的任何其他帖子(请参阅右侧)。

#1