CSS - Firefox 中滑块的宽度

Posted

技术标签:

【中文标题】CSS - Firefox 中滑块的宽度【英文标题】:CSS - Width of Slider in Firefox 【发布时间】:2013-03-15 17:59:30 【问题描述】:

我正在修复一个网站。我遇到了我使用的滑块的问题。我使用的滑块是轨道滑块。

事情是这样的:

每张幻灯片加载比容器宽度少 1 个像素,然后在一秒钟后拉伸并最大化其容器的宽度。

我在父容器内的每个 div 中尝试了 width:100%,但 css 规则并没有解决我的问题。

所有现代浏览器看起来都很棒,除了 Firefox。

网站是http://www.shamarra.co.nz/test/

Q:如何在每张幻灯片的初始状态填充宽度,使其符合FIREFOX中的标准滑块输出。

我怀疑滑块需要修改 CSS 来解决这个问题。

【问题讨论】:

firefox 对我来说看起来不错,你确定有问题吗? @Evan:是的,看看右边滑块的边缘。有一秒钟后立即调整大小的小间隙(填充或其他东西)。不要放大视图。然后你可以注意到错误。 我认为问题可能与每个图像的不透明度开始1 然后被降低到0 只是为了再次回到1... 【参考方案1】:

这似乎是 FireFox 10+ 的一个错误。有多个错误报告。

报告 1: https://bugzilla.mozilla.org/show_bug.cgi?id=745549

报告 2: https://bugzilla.mozilla.org/show_bug.cgi?id=780521

我不确定是否有修复,上次我读到他们还没有找到解决这个错误的方法。

【讨论】:

非常感谢,我在阅读报告时解决了这个问题 1。解决方案是在幻灯片的每个图像中使用 box-shadow。 @jed 太好了,很高兴听到这个消息!【参考方案2】:

只需尝试以下方法:

在您的 css 文件中:http://www.shamarra.co.nz/wp-content/plugins/wp-orbit-slider/css/default.css

删除/隐藏以下行并在 Firefox 中刷新/清除浏览器缓存。

#orbit-inside img.orbit-slide 
    /*height: auto;
    max-width: 100% !important;
    width: 100% !important;*/

还有,

    div.orbit > img 
        /*left: 0;*/
        position: absolute;
        top: 0;
    

    div.orbit > img, div.orbit > a 
        display: none;
        height: 100%;
        /*left: 0;*/
        position: absolute;
        top: 0;
        /*width: 100%;*/
    

然后它将开始完美地工作。我已经在我的本地服务器上进行了测试,它工作正常。

我认为这可以帮助您解决问题。

【讨论】:

以上是关于CSS - Firefox 中滑块的宽度的主要内容,如果未能解决你的问题,请参考以下文章

DIV滚动条啥设置滑块的大小及滑道的宽度?

如何在 HTML 中移动优化我的滑块的大小?

使用滑块更改两个块的宽度比例

如何使用 jQuery 中的滑块更改样式的值

如何删除 Qualtrics 中滑块问题左侧的选择文本?

如何找到滑块的拇指来设置其宽度