图像在 webkit 中被弄乱了答案

【问题标题】：Images are messed up in webkit图像在 webkit 中被弄乱了
【发布时间】：2010-10-05 21:02:55
【问题描述】：

在此页面上http://cacrochester.com/ 2 个旋转图像在 webkit 浏览器中被弄乱了。并非一直如此，而且通常不在第一张图像上。这是为什么呢？

我正在使用 NivoSlider jquery 插件来旋转图像。

这就是我所看到的。

【问题讨论】：

在 Firefox 中我也觉得很垃圾
对我来说，它在 FF 3.6.3 上运行良好。你是哪个版本的？
你能更具体地说明他们“搞砸了”吗？请描述您期望看到的行为与您实际看到的行为。
顺便说一句。尝试对字体进行一些抗锯齿 ;-)
我认为它看起来很适合它所在的句子和上下文:) +1

标签： jquery html css webkit image-rotation

【解决方案1】：

我看到你说的这种奇怪的效果，问题似乎出在每列的显示方式上。 Nevertheles，您应该为您正在构建的页面尝试任何其他解决方案，因为您应用的效果更适合旋转选取框而不是滑块......我见过很多真正酷的滑块（看看 jquery 滑块在 Google 上或查看 http://vandelaydesign.com/blog/web-development/jquery-image-galleries/)。

除此之外，您必须考虑重新制作 img，文字真的很难看（我希望您不要对我这样说生气，因为我正在努力帮助您的页面看起来更好）。正如我所说，如果您使用像 Photoshop 这样的照片编辑软件，您应该将文本抗锯齿设置为清晰或清晰，但不要设置为“无”（因此您不会再看到它“像素化”）。这家伙的照片也有点像素化......

希望我的 2 美分能帮到你！

【讨论】：

【解决方案2】：

将此添加到<div id="slider"> 元素

style="float:right;position: relative;height:270px;width:610px;"

【讨论】：

我已经在#slider 上拥有这些样式，除了相对位置。 Position: relative 是通过 nivoSlider 插件动态添加的，所以即使我在 chrome 的开发人员工具中添加它（基本上就像 firebug），它只是将它划掉。
我知道你做到了，但我想脚本的编写方式无法通过样式表正确提取这些值。将其直接添加到 div 似乎可以解决问题。试一试。

【解决方案3】：

nivo-slider.css，第 36、37 行：

.nivo-slice {
     display: none;
     /* ... */
}

【讨论】：

【解决方案4】：

在我看来完全没问题。也许尝试不同的 Jquery 滚动插件。

【讨论】：