html - overflow: hidden ; causing alignment issues in firefox

Question

Welcome To Ask or Share your Answers For Others

html - overflow: hidden ; causing alignment issues in firefox

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - overflow: hidden ; causing alignment issues in firefox

I have a layout which renders perfectly fine in Webkit based browsers but in internet explorer and firefox the vertical alignment is off. The simplest example of the code is:

<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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:38:21+0000

For inline-block I usually specify vertical-align:top to alleviate vertical alignment issues. And be aware that there will be horizontal gaps between the sibling divs that have inline-block, which can only be fixed by killing the literal whitespace in the HTML.

And I hope you are using a doctype.

Hope this helps, otherwise please setup a jsfiddle so I can visually see this.

Categories

html - overflow: hidden ; causing alignment issues in firefox

html - overflow: hidden ; causing alignment issues in firefox

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags