图像滑块不能很好地与 css 配合使用答案

【问题标题】：Image slider not playing nice with css图像滑块不能很好地与 css 配合使用
【发布时间】：2010-08-23 16:27:57
【问题描述】：

我有一个位于背景图像上方的图像滑块，但我似乎无法让图像滑块将死点定位在内部并且不切断背景图像。还有一些奇怪的行为，第一张幻灯片总是比其他幻灯片更远！？！？

#slider {
background:url("../images/bg-slider.gif") no-repeat scroll 0 0 transparent;
height:389px;
width:590px;
}

#slider ul { padding:25px;}
  #slider ul, #slider li { width:590px; height:389px; overflow:hidden; list-style:none;     }

http://fluroltd.com/clients/harveys/

【问题讨论】：

Pekka 感谢您添加 # 这是我的错误，因为它们没有被复制。
链接在 chrome 中看起来正确 - 哪个浏览器有问题？
嗨 Inrbob，它在任何浏览器（包括 chrome）中看起来都不正确。 s 第一张幻灯片和前面的幻灯片没有那么远。

标签： css slider

【解决方案1】：

啊，好吧，我想我明白你的意思了。尝试摆脱这一行：

#slider ul { padding:25px;}

这会使你的 ul 和 li 的宽度增加 50 像素。另一种选择是将宽度声明减少到 540px...

编辑

第三种选择是修改您正在使用的 js。目前它正在使用 .width() 来获取元素大小。这不包括填充值。使用 .outerWidth() 将填充包含在计算中。

【讨论】：

1.删除填充不起作用。 2.减少背景的宽度也不起作用，只是削减背景图像。 3. 将 .width 更改为 outerwidth() 会同时停止滑块。
我早先在我的 CSS 中发现了这个问题，我对 ul 的 CSS 有一个更通用的声明。使它更具体和中提琴。

【解决方案2】：

我之前在我的 CSS 中发现了这个问题，我对 ul 的 CSS 有一个更通用的声明。使其更加具体和中提琴。

【讨论】：