2

在我的 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;}
4

3 回答 3

1

您(在 FF 中)正好有17px的额外宽度,这正是浏览器滚动条的宽度。

您的开始(初始)加载黑屏(动画)留下了 17px 的故障:
因为它的动画保持 DOM 宽度等于screen width没有右滚动条(100% 屏幕宽度)。
在页面完全加载并将滚动条添加到页面后,它实际上添加了由加载动画维护的额外17px(到 100%)宽度。

希望我把你引向正确的方向。

顺便说一句,尝试添加:

html {
   overflow-y: scroll;
}

并且 - 如果仍然需要 -如前所述调整加载元素的宽度。

于 2012-06-18T21:45:20.520 回答
0

添加这个:

body{
    overflow-x: hidden;
}

问题解决了。(暂时地)


那么问题出在哪里?

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

于 2012-06-18T22:00:53.750 回答
0

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

于 2012-06-19T14:02:14.600 回答