html – 溢出:隐藏;在Firefox中导致对齐问题

前端之家收集整理的这篇文章主要介绍了html – 溢出:隐藏;在Firefox中导致对齐问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个布局,可以在基于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中导致这种换行符错误.

任何帮助非常感谢.

解决方法

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

我希望你使用的是doctype.

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

原文链接:https://www.f2er.com/html/231844.html

猜你在找的HTML相关文章