Question

有人可以向我指出为什么在图像下方和导航栏上方有一条线（背景颜色，在这种情况下为红色）？ Firefox和Chrome都显示红线，因此我假设它按预期呈现。但我似乎无法通过开发人员工具找到问题。边框，填充和边距均为0，这令人费解。以下是代码的精简版本，或jsfiddle.net/bvss4/9：

  <body>
    <div id="main-wrapper">
      <header id="main-header">
        <img id="title-image" src="http://i.imgur.com/JaYSY.jpg" />
        <div id="main-navbar">
            STUFF
        </div>
      </header>
    </div>
  </body>

CSS：

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#main-wrapper {
    width: 90%;
    margin: 0 auto;
    border: 3px solid #888;
    margin-top: 20px;
    background: red;
}

#title-image {
    width: 100%;
}

#main-navbar {
    width: 100%;
    background: #333333;
}

bad red line

Answer 1

向display:block添加#title-image将解决此问题

 #title-image {
     width: 100%;
     display:block;
 }

JSFiddle here

Answer 2

在图片的CSS上设置vertical-align: bottom。

它发生的原因是因为图像与文本内联显示。这意味着，如果y，g等字母低于基线并导致空间，则必须在线下方留出一小块空间。

通过将vertical-align设置为bottom，您可以移动图像，使其与文本底部对齐，从而避免此问题。

您应该注意一个例外：如果图像的高度低于单行文本，它将在其上方留一个间隙以为该文本腾出空间，除非您将包含元素设置为{ {1}}有效。

Answer 3

我刚刚在http://jsfiddle.net/nUacj/尝试过 - 我设置了vertical-align：middle而不是基线，它解决了问题。这对您来说是一个可行的解决方案还是您需要它作为基准？

CSS：图像（IMG）元素下方出现2像素线？

3 个答案: