Question

我有一个布局，可以在基于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 div相对于＃content1和＃content3 divs被推高了。在这种情况下，我有一个相对强有力的理由在浮点数上使用内联块，但是如果唯一的“修复”是移动到浮点数我将不得不继续使用它，但是我宁愿避免这样的工作，如果目前，我们的试验测试发布的时间很短，从长远来看，布局可以移动到浮标。

此外，我试图弄清边距和填充物没有成功。在那个混乱中我已经确定存在溢出：隐藏在＃content2中导致这种换行符错误。

任何帮助都非常感激。

Answer 1

对于inline-block，我通常指定vertical-align:top来缓解垂直对齐问题。并且请注意，具有内联块的兄弟div之间将存在水平间隙，这只能通过杀死HTML中的文字空格来修复。

我希望您使用的是doctype。

希望这会有所帮助，否则请设置一个jsfiddle，以便我可以直观地看到它。

溢出：隐藏;在Firefox中导致对齐问题

1 个答案: