Firefox中的神秘空白

Question

在我的 Firefox 网站右侧有一个神秘的空白（在 PC 和 Mac 上，最新版本），我终其一生都无法弄清楚是什么原因造成的。

这就是它的样子 -

我多年来一直在搜索 CSS，现在试图弄清楚它是否是一些边距或填充问题，但我找不到任何东西。 此外，如果我删除 div ID 'slider3'，问题似乎消失了，但我无法弄清楚这个 div 是如何导致空白的，因为它没有应用 CSS - 它只是一个容器。

这是我的网站http://www.simplerweb.co.uk

这里有一些相关代码，所以答案对以后的人有用。

<div class="fullw">
<div class="sliderleft"></div>
<div class="sliderright"></div>



            <div id="slider3">
                <div class="quote">

                <div class="centmid">
                    <h1 class="fronth">Hello</h1>   
                    <h2 class="frontp">Welcome to Simpler Web</h2>
                    <h2 class="frontp2">We're an Edinburgh based Web<br> Design Agency</h2>
                </div><!-- end div centmid -->


                                </div> <!-- end div quotes1 -->
                <div class="quote2">
                <div class="centmid">
                    <h2 class="frontb">We make wonderful, cross platform <br> accessible Websites </h2>
                </div> <!-- end div centmid -->
                </div> <!-- end div quotes2 -->

                <div class="quote3">
                <div class="centmid">
                <h2 class="frontc">We can translate your ideas into reality </h2>
                </div> <!-- end div centmid -->
                </div><!-- end div quotes3 -->


            </div> <!-- #slider3 -->

</div>

CSS

/* 以下样式对于滑块的功能是必不可少的 */

.plusslider {
    overflow: hidden;

    position: relative;
    padding-top: 140px; /* The height / width of the slider should never be set via the CSS. The padding increases the slider box-model while keeping it dynamic */
}

.plusslider-container { position: relative; }

/* Slides must have a set width - even though they may be dynamic. If no width is set on <img> slides, the default image size will be assumed */
div.child { width: 480px; }

.plusslider .child { float: left; }

/* PlusFader Specific (not needed with plustype:slider */
.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; }
.plustype-fader .current { z-index: 5; }
/* End PlusFader Specific */

/* No-javascript fallback -- change "#slider" and "#slider2" identifiers as needed for your html */
#slider > * { display: none; }
#slider > *:first-child, #slider2 > *:first-child { display: block; }
/* End no-javascript fallback */

/* 结束基本样式*/

/* 以下样式对于滑块功能不是必需的。它们特定于示例内容。 请务必注意，褪色效果不适用于非图像内容，除非 内容区域具有纯色背景（背景图像或背景颜色，但不透明）。

Slides to not have to be the same width or height, but if you'd like a consistent width and/or height, make sure to set that within the CSS! */
#slider .slide1 { padding-left: 40px; padding-right: 40px; margin-left: 0; margin-right: 0; } 
#slider .slide1 { height: 210px; padding-top: 20px; padding-bottom: 20px; margin-top: 0; margin-bottom: 0; } 

.slide1 {  height: 500px; padding: 20px 40px; }
.slide1 h2 { color: #fff; font-size: 20px; margin: 0 0 20px 0; text-align: left; }
.slide1 p { border-left: 3px solid #fff; color: #fff; padding: 0 0 0 10px; }

.quote, .quote2, .quote3 { height:400px; padding: 20px 0; width: 980px;   width: 100%; position: relative; }
.quote { background-image: url(../images/weare.png); background-position: center; background-repeat: no-repeat; }
.quote2 { background-image: url(../images/headlogosandroid.png); background-position: center; background-repeat: no-repeat; }
.quote3 { background-image: url(../images/ideafront.png); background-position: center; background-repeat: no-repeat; }

.plusslider a img { border: none; } /* Prevent blue borders in IE (not only does it look ugly, but it messes up spacing which breaks the "slider" type */

.plusslider-pagination { position: absolute; left: 0; bottom: 0; }
.plusslider-pagination li { float: left; list-style: none; margin-left: 5px; }

#slider3 {margin: 0; padding: 0;}

Answer 1

您（在 FF 中）正好有 17px 额外宽度，这正是浏览器滚动条的宽度。

您的开始（初始）加载黑屏（动画）会留下 17 像素的故障：
因为它的动画保持 DOM 宽度等于 screen width 没有右滚动条（100% 屏幕宽度）。
在页面完全加载并将滚动条添加到页面后，它实际上添加了 Loading 动画维持的 extra 17px（到 100%）宽度。

希望我能指引你正确的方向。

顺便补充一下：

html {
   overflow-y: scroll;
}

并且 - 如果仍然需要 - 调整 loading 元素宽度，正如我之前提到的。

Answer 2

添加这个：

body{
    overflow-x: hidden;
}

问题解决了。 （暂时）

---

那么问题出在哪里？

它在您的<div> 与plusslider slider3 plustype-slider 的类。您不断为其设置不正确的宽度。你必须减去滚动条的宽度。

Answer 3

您也可以尝试这样做：填充：0px（或其他）17px；和边距：0px（或其他）-17px；现在你在两边的空白已经消失了。