html - 3列div布局的问题

Question

我已经有一段时间没有做一些 CSS 设计工作了。我的 html 中标记了一个 3 列的下部，例如:

<section id="lowerContent">
    <section id="lcLeft"></section>
    <section id="lcMiddle"></section>
    <section id="lcRight"></section>
</section>

我有这样的部分的 CSS:

section#lowerContent {
    width: 958px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    height: 405px;
    overflow:hidden;
}

section#lcLeft {
    width: 216px;
    float:left;
    height: 100%;
    border-right: 1px solid grey;   
}

section#lcMiddle {
    width: 428px;
    float:left;
    height: 100%;
    border-left: 1px solid grey;
    border-right: 1px solid grey;   
    margin-left: 5px;
}

section#lcRight {
    width: 299px;
    float: right;
    height: 100%;
    border-left: 1px solid grey;
    margin-left: 5px;   
}

如果将带有边距和边框的部分加起来，它是 957px，所以我在 lowerContent 部分中有 1px 的空间。我的问题是在 IE8 和 FF 中。当我执行 ctrl + 或 ctrl - 最后一个 div 被推到第二行并且不保持其位置。它在 chrome、opera 和 safari 中正常工作。谁能告诉我我错过了什么？

谢谢

Answer 1

我的解决方案:

首先，我将标记更改为以下内容:

<section id="lowerContent">     
    <section id="lcLeft">
        <section id="lcLeftInner"></section>
    </section>     
    <section id="lcMiddle">
        <section id="lcMiddleInner"></section>
    </section>     
    <section id="lcRight">
        <section id="lcRightInner"></section>
    </section>
</section> 

CSS 适用于所有主流浏览器，您可以按 ctrl+ 和 ctrl - 不会破坏布局。

    section#lowerContent {      
    width: 960px;      
    height: 405px;  
}    

section#lcLeft {      
    width: 218px;            
    height: 100%;       
} 

section#lcLeftInner {
    width: 216px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}   

section#lcMiddle {     
    width: 442px;          
    height: 100%; 
}

section#lcMiddleInner {
    width: 430px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    margin-left: 5px;
    margin-right: 5px;
}

section#lcRight {      
    width: 300px;         
    height: 100%;      
}

section#lcRightInner {
    width: 298px
    border-left: 1px solid grey;
    border-right: 1px solid grey;
} 

希望对某人有所帮助。