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

任何人都可以指出为什么在图像下方和导航栏上方有一行（背景颜色为红色）。 Firefox和Chrome都显示红线，所以我认为它是按照预期呈现的。但我似乎无法通过开发人员工具找到问题。边界，填充和边距都是0，令人费解。下面的代码的精简版，或jsfiddle.net/bvss4/9：CSS：图像（IMG）元素下方出现2像素线？

<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

来源

2012-01-11 Dan7

你可以减少到最小的情况吗？截至目前，我认为这是“过于本地化”，除非可以确定具体问题。 – 2012-01-11 23:32:18

嗨，我在这里更新了最小版本：http://jsfiddle.net/bvss4/1/。谢谢。 – Dan7 2012-01-11 23:37:40

更小：http://jsfiddle.net/bvss4/9/更新问题以反映。 – 2012-01-11 23:47:15

添加display:block您#title-image将修复它

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

JSFiddle here

来源

2012-01-11 23:48:44

工程，但太局部化了，无法找到理想的答案。 – 2012-01-11 23:50:16

@Kolink - 我不同意。我之前遇到过很多次 - 填充容器的内联元素在其下面留下空隙。解决方案总是或者是'display：block'，或者按照'
'的顺序，或者将它包装在一个块元素中。 – gilly3 2012-01-11 23:51:59

我只是试着将它http://jsfiddle.net/nUacj/ - 我设置垂直对齐：中间，而不是基线并解决了这个问题。这对你来说是一个可行的解决方案还是你需要它成为基线？

来源

2012-01-11 23:44:46 ClarkeyBoy

+1。是的，这正是为什么过于全面的CSS重置是邪恶的:) – Ryan 2012-01-11 23:46:38

是的，这是可行的，Brett的解决方案也是如此。尽管完全省略“垂直对齐”并不能解决这个问题。尽管如此，仍是一个很好的解决方法感谢ClarkeyBoy！ – Dan7 2012-01-11 23:55:56

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

它发生的原因是因为图像与文本内联显示。这意味着他们必须允许线下的一个小空间，以便在y，g等字母下降到基线以下并产生空间。

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

有一个例外，你应该知道：如果图像的高度低于单行文本，它会在它上面留下一个空白，为该文本留出空间，除非您将包含元素设置为具有line-height工作。

来源

2012-01-11 23:50:00

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

回答

相关问题