1

我在这里建立一个网站：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：worded。
用 300px 高的 div 替换 imgs：工作。
为滑块中的每个元素设置填充 0、边距 0：没用。
检查验证错误：完全验证。
检查的图像高 300 像素：它们是.
检查开发工具中的每个元素以检查任何流氓边距/填充：未找到。

我真的没有想法，任何帮助将不胜感激！

4

4 回答 4

6

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

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

div#slider ul li img {
    width: 100%;
    display: block;
}
于 2013-04-10T09:21:49.280 回答
2

试试看

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

或者

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

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

于 2013-04-10T09:17:45.963 回答
1

您所要做的就是vertical-align: bottom;像这样添加：

div#slider ul li img {
    width: 100%;
    vertical-align: bottom;
}
于 2013-04-10T09:21:29.867 回答
0

出于某种原因，我的网站顶部和左侧只有 5 像素的边距。我无法摆脱它......直到我将 body 元素的边距设置为 0。问题解决了。希望这可以帮助遇到这个烦人问题的任何人。:)

于 2019-04-16T17:26:46.003 回答