Question

我的网站右侧有一个神秘的空白区域（在PC和Mac上，最新版本），我不能为我的生活找出导致它的原因。

这就是它的样子 - enter image description here

我一直在搜索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 的额外宽度，这正是浏览器滚动条的宽度。

您的开始（初始）加载黑屏（动画效果）会留下17px的故障：
因为它的动画保持DOM宽度等于没有右滚动条的screen width（100％屏幕宽度）。
页面完全加载并且滚动条添加到页面后，它实际上添加了由 Loading 动画维护的额外 17px（达到100％）宽度。

希望我能让你朝着正确的方向前进。

顺便说一下，尝试添加：

html {
   overflow-y: scroll;
}

和 - 如果仍然需要 - 调整 loading 元素宽度，如前所述。

Answer 2

添加：

body{
    overflow-x: hidden;
}

问题解决了。（临时）

那么问题在哪里？

它位于<div>，类别为plusslider slider3 plustype-slider。您经常为它设置不正确的宽度。您必须减去滚动条宽度。

Answer 3

您也可以尝试这样做：填充：0px（或其他）17px;和保证金：0px（或其他）-17px;现在你身边的空白消失了。

firefox中的神秘空白

3 个答案:

那么问题在哪里？