帮助将图像滑块从 img 更改为 li

Question

我花了很多时间试图弄清楚如何让这个滑块将 li 与背景图像一起使用而不是 img。

这样做的原因是我打算将滑块用于 Wordpress 和许多 Wordpress 主题将它们自己的 css 属性应用于图像（例如“最大宽度”），这通常会破坏滑块。如果有人可以查看以下脚本并将其更改为与 li 一起使用，我将不胜感激 :) 我一直在尝试自己，但由于某种原因，它所做的只是永远加载永远不会显示任何图像..

这是脚本：

http://pastebin.com/8J9uwRtZ

与此同时，我将继续尝试自己解决这个问题。如果有人可以帮助我，我将不胜感激。

这是一个测试站点，其中的滑块示例不与主题“Thematic”一起使用，该主题将 100% 的“最大宽度”应用于图像以及不适用的主题示例（因此滑块有效完美）。仅供参考，从“主题”和其他主题中删除最大宽度每次都会修复滑块，所以这绝对是问题所在；这就是为什么我希望使用 li 而不是 img 的原因。

http://www.matthewruddy.com/demo/

http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true

感谢任何可以提供帮助的人！马修。

Answer 1

正如 akonsu 所说，您最好的选择是将特定的图像样式应用于 lof 类。主题 image.css 文件定义的默认样式仅适用于..您猜对了..默认图像。在 lof 类中正确重新定义它将覆盖该规则并使用新样式。如果您的浏览器似乎仍然无法识别它，请在样式规则的末尾添加一个大胖子 !important，这样除了 IE6 之外的所有浏览器都会正确识别它。

最大宽度仅适用于不存在其他特定规则的图像，因此是“级联”样式表。标记为 !important 的 CSS 规则优先于相同类型的其他规则。通常在 CSS 中，规则是从上到下工作的，因此如果您将新样式分配给样式表下方或辅助样式表中的元素，则后面的规则将优先。 !important 确保此规则具有优先权。即：

p { color: blue !important; }
.container h3 { do stuff }
.container p { color: red; }

在除 IE6 之外的所有浏览器中，只要您的 doctype 设置正确并且您没有进入怪癖模式，所有段落元素的字体颜色都将为蓝色。但是，做这样的事情：

p { color: blue; }
.container p { color: red !important; }

将只为容器中的所有段落元素显示红色字体颜色，适用于所有浏览器。这是可行的，因为即使 IE6 不理解 !important 规则，它仍然完全理解级联规则，并且会根据上次定义的内容应用样式。

因此，在您的情况下，以下规则可以正常工作并修复您在 IE 中的显示问题：

ul.lof-main-wapper li img { max-width: none !important; }