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