Chrome和Firefox之间的区别包装列div

我有一个通过CSS定义的布局，有三列。它通过Chrome正确显示，但在Firefox中，第三个（右侧）列隐藏在底部。我是否错误地定义了布局？Chrome和Firefox之间的区别包装列div

<style type="text/css"> 
    .content { 
     position: relative; 
     border-top-width: 1px; 
     width: 100%; 
     min-width: 960px; 
     margin-top: -1px; 
    } 

    .content-container { 
     border: 0; 
     position: relative; 
     width: 960px; 
     border-radius: 0 0 0 0; 
     margin: auto; 
    } 

    .left-menu-container { 
     width: 188px; 
     padding: 0 20px 0 0; 
     border: 0; 
     box-sizing: border-box; 
     vertical-align: top; 
     position: relative; 
     display: inline-block; 
    } 

    .center-content-container { 
     vertical-align: top; 
     display: inline-block; 
     min-height: 900px; 
     width: 500px; 
     border-left: 1px solid #EBEBEB; 
     border-right: 1px solid #EBEBEB; 
     height: 100%; 
     position: relative; 
     padding: 15px 0 0 0; 
    } 

    .center-content-subcontainer { 
     padding: 0 0 0 5px; 

    } 

    .right-menu-container { 
     vertical-align: top; 
     display: inline-block; 
     width: 260px; 
     border: solid; 
     position: relative; 
    } 

    .right-menu-subcontainer { 
     margin: 16px 0 0 0; 
    } 

    #slideshow { 
     position:relative; 
     height:250px; 
     width: 250px; 
     overflow: hidden; 
     background-color: #ffffff; 
    } 

</style>

我怎样才能让它在不同的浏览器上正确显示？

<body> 
<div class="content"> 
    <div class="content-container"> 
     <div class="left-menu-container"></div> 

     <div class="center-content-container"> 
      <div class="center-content-subcontainer"></div> 
     </div> 

     <div class="right-menu-container"> 
      <div class="right-menu-subcontainer"> 
       <div id="slideshow" align="center"> 
        <img src="" alt="Slideshow" title="Slideshow" width="250" height="100"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 


</body>

来源

2011-08-14 Ed.

代码/风格：http://jsfiddle.net/userdude/cTWuE/ –

在FF 5.x中框宽度这样的：

Left: 188 + 20 (width+ padding) 
Center: 500 + 1 + 1 (width + L & R borders) 
Right: 260 + 3 + 3 (width + L & R borders) 

Total: 976

Firebug的布局督察这里是你的朋友。

来源

2011-08-14 19:59:37 steveax

@Ed ：恕我直言，这是问题的核心。你有976像素塞进一个960像素宽的容器。 – Sparky

啊。我怎么错过了填充？！ –

我认为这个问题是这一行的CSS：

box-sizing: border-box;

您正在使用什么版本的Firefox？因为即使迟到版本4（可能稍后，我不确定），Firefox只支持-moz-box-sizing。如果Firefox不改变盒子大小，那么这意味着它认为你试图将价值968px的内容粘贴到960px的空间中。

来源

2011-08-14 19:49:14 sdleihssirhc

试试这个你左容器上：

.left-menu-container { 

    width: 188px; 
    padding: 0 20px 0 0; 
    border: 0; 

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:   border-box; 

    vertical-align: top; 
    position: relative; 
    display: inline-block; 
}

也许值得一读：从上面 https://developer.mozilla.org/en/CSS/box-sizing

来源

2011-08-14 20:20:24

Chrome和Firefox之间的区别包装列div

回答

相关问题