jQuery 幻灯片从图像顶部切片
由于某种原因,Chrome 和 Safari 中的幻灯片会切掉我网站上一个滑块上的图像顶部,而不是另一个滑块。每个滑块的代码都有点复杂,因此您可以在此处查看问题和代码: http:// explorevictoria.dreamhosters.com/
我在同一页面上使用了相同的滑块两次,但这些函数有自己的变量。这个较小的滑块曾一度工作正常,但现在在对页面其他部分进行一些更改后,底部滑块中图像的前 20 个像素被抛在了后面。
我已经尝试了几十种与网站该部分周围的填充和边距有关的方法,但似乎没有任何解决办法。
如果有任何不清楚的地方,我可以提供有关该问题的更多信息,但我认为在查看该网站时它会很明显。
For some reason, slide in Chrome and Safari is slicing off the tops of images on one slider on my site and not the other. The code is a bit hairy for each slider, so you can have a look at the problem and the code here: http://explorevictoria.dreamhosters.com/
I have used the same slider twice on the same page, but the functions have their own variables. At one point this smaller slider was working properly, but now after some changes to other parts of the page the top 20 pixels of the images in the bottom slider are getting left behind.
I've tried a couple of dozen things to do with padding and margins around that part of the site, and nothing seems to be fixing it.
I can provide more information about the problem if anything is unclear, but I think it will be obvious when viewing the site.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
将
.slidesmall
的margin
更改为margin: 20px auto
,它将停止执行此操作。这似乎是一个浏览器问题,因为如果您在 Chrome 中的开发工具中拖动图像或突出显示切片后的元素,它将变得正常。可能与浏览器认为上面的元素覆盖了div
的顶部部分有关,因此它无法正确地重绘像素。Change your
margin
for.slidesmall
tomargin: 20px auto
and it will stop doing it. It seems to be a browser issue, because if you drag the image around or highlight the element inside your dev tool in Chrome after it does the slicing, it will turn normal. Probably has to do with with the browser thinking that the element above is covering the top portion of thediv
so it doesn't redraw the pixels correctly.