代码之家 › 专栏 › 技术社区 › Mike

溢出:隐藏;导致Firefox中的对齐问题

css html

Mike · 技术社区 · 15 年前

我有一个在基于Webkit的浏览器中呈现完美的布局,但是在Internet Explorer和Firefox中,垂直对齐是关闭的。最简单的代码示例是:

<html>
  <head>
    <style>
      body {
        padding: 20px;
        background-color: #c0c0c0 ;
      }

      #wrapper {
        border: 4px solid #9cf ;
      }

      #wrapper > div {
        display: inline-block ;
        height: 30px ;
        line-height: 30px ;
      }

      #content1 {
        width: 100px ;
        background-color: yellow ;
      }

      #content2 {
        width: 325px ;
        overflow: hidden ;
        white-space: nowrap ;
        background-color: blue ;
      }

      #content3 {
        width: 400px ;
        background-color: red ;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="content1">Content 1</div>
      <div id="content2">A rather long string which will become truncated and cause the vertical alignment issue</div>
      <div id="content3">Another piece of content</div>
    </div>
  </body>
</html>

您将看到Content2分区相对于Content1和Content3分区向上推。在这种情况下,我有一个相对强烈的理由在浮动上使用内联块,但是如果唯一的“修复”是移动到浮动上,我将不得不继续使用它,但是如果可能的话,我宁愿避免这样的工作,因为目前,我们的飞行员测试发射时间很短,从长远来看,布局可以移动到浮动上。

此外,我还试图搞砸利润和铺垫,但没有成功。在这场混乱中,我已经确定,正是溢出的存在:隐藏在内容2中,导致了这种断行式的扭曲。

任何帮助都非常感谢。