Question

我正在这里建立一个网站：argit.bounde.co.uk

我一直在寻找几个小时试图找到解决方案。我正在尝试构建自己的滑块，这将是流体宽度，因此我无法在可能的情况下定义高度/宽度。我有大量的滑块使用库存图像但是当我把元素放在它下面时，它们比它们想要的低5px。这种情况发生在除我测试的IE之外的所有浏览器中。我想给滑块下面的横幅设置一个负的上边距，这样它就会显示在滑块上，但直到我能弄清楚导致这个5px边距的原因我不能。

html在这里：

<div id="slider">
  <div id="sliderwidth">
    <ul>
      <li><img src="imgs/slider/img1.jpg" alt="image 1"></img></li>
      <li><img src="imgs/slider/img2.jpg" alt="image 2"></img></li>
      <li><img src="imgs/slider/img3.jpg" alt="image 3"></img></li>
      <li><img src="imgs/slider/img4.jpg" alt="image 4"></img></li>
    </ul>                           
  </div>                        
</div>  

<div id="sliderborder">

我尝试过的事情：

删除所有jQuery：没有工作 删除所有CSS样式滑块：无效。
将img高度设置为300px：无法正常工作 将li高度设置为300px：措辞。
将div替换为300px高的div：工作。
设置填充0，边距0到滑块中的每个元素：没有工作 检查验证错误：完全验证 已检查的imgs为300px高：它们。
检查开发工具中的每个元素以检查任何流氓边距/填充：无找到。

我完全没有想法，任何帮助都将不胜感激！

Answer 1

没有什么奇怪的......只需将display:block添加到您的图片中即可。

默认情况下，所有图像均为inline-elements（内联或内联块），并作为一行文本处理。这个空间是y或g的悬挂部分。这个解释得非常糟糕，但你明白了。

div#slider ul li img {
    width: 100%;
    display: block;
}

Answer 2

只需尝试

div#slider ul img {
    display: block;
    width: 100%;
}

或

div#slider ul img {
    vertical-align: top;
    width: 100%;
}

因为默认情况下，图像是内联块元素，因此它们可能需要正确的垂直对齐设置

Answer 3

您只需要像这样添加vertical-align: bottom;：

div#slider ul li img {
    width: 100%;
    vertical-align: bottom;
}

Answer 4

由于某种原因，我在网站顶部和左侧仅留了5px的边距。我无法摆脱它……直到我将body元素的边距设置为0。问题解决了。希望这对遇到此烦人问题的任何人有所帮助。：）

奇怪的5px保证金

4 个答案: