Question

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

原因是我打算使用Wordpress＆amp; amp;滑块。许多Wordpress主题将自己的css属性应用于图像（例如'max-width'），这通常会破坏滑块。如果有人能查看以下脚本并将其更改为与li一起工作，我将不胜感激:)我一直在尝试自己，但出于某种原因所有它会做的是永远加载永远不会显示任何图像..

这是脚本：

http://pastebin.com/8J9uwRtZ

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

这是一个测试网站，其中一个滑块示例不适用于主题'Thematic'，它将“max-width”100％应用于图像＆amp;一个没有的主题的例子（因此滑块完美地工作）。仅供参考，从“主题”和“主题”中删除最大宽度其他主题每次修复滑块所以这绝对是问题所在;因此，为什么我希望使用li而不是img's。

http://www.matthewruddy.com/demo/＆lt; - 无法正常工作

http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true＆lt; - working

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

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; }

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

1 个答案: