为什么我的整个网页都在Firefox上的按键上转移?

时间:2013-11-24 15:18:24

标签: javascript jquery html css carousel

我在the Unslider plugin上使用this website

每次按> (右键)时,整个页面(可能是body元素)向右移动25个像素。

每次按< (左键),整个页面都会移回正常位置。

您可以在此处查看问题:

http://energy-solutions.herokuapp.com

以下是html.erb文件:

<div class="imagecarousel has-dots">
    <ul>
        <li style='background-image: url("/assets/solar-18694222104b6ced788b349cd63f53cc.jpg")'>
            <div class="caption">
                <h1>Renewable Energy.</h1>
                <p>The future is in our hands.</p>
            </div>
        </li>
        <li style='background-image: url("/assets/wind-eaac506eb1ae1d11c572e1bec4b04ca2.jpg");'>
            <div class="caption">
                <h1>Renewable Energy.</h1>
                <p>Energy is beautiful.</p>
            </div>
        </li>
        <li style='background-image: url("/assets/geothermal-58b3e2d8eeb063847de79d733f7611e0.jpg");'>
            <div class="caption">
                <h1>Renewable Energy.</h1>
                <p>Clean. Safe. Efficient.</p>
            </div>
        </li>
        <li style='background-image: url("/assets/solar-46b6cfecb2169a3d14552f90196a56fb.jpg");'>
            <div class="caption">
                <h1>Renewable Energy.</h1>
                <p>The world needs it.</p>
            </div>
        </li>
        <li style='background-image: url("/assets/solarpanels-c787e429912f640d7770f1cc482073ad.jpg");'>
            <div class="caption">
                <h1>Renewable Energy.</h1>
            </div>
        </li>
        <li style='background-image: url("/assets/wind-ee6159e5689bd3475afc83cefc876069.jpg");'>
            <div class="caption">
                <h1>Renewable Energy.</h1>
            </div>
        </li>
    </ul>
</div>

以下是我在application.js中的称呼方式:

$('.imagecarousel').unslider({
        fluid: true,
        dots: true,
        keys: true,
        speed: 500
    });

有什么想法吗?它只发生在这个页面上,所以我假设它与图像轮播有关。

修改:此问题仅出现在Firefox中。 Chrome和Safari似乎没有这个问题。

如果我要发布可能与解决此问题相关的更多代码,请告诉我。

1 个答案:

答案 0 :(得分:0)

添加以下代码似乎解决了这个问题。这可能不是解决此问题的正确方法,但它现在似乎适用于所有浏览器。

html{
    overflow-x: hidden;
}
head{
    overflow-x: hidden;
}