2
我偶然發現了一個令人討厭的問題。當我的項目在1920px和1050px之間查看時，一切都很正常，而且是我想要的。
當我調整它低於1050px時，出現一些奇怪的邊距。
http://imgur.com/a/UFrz9
編輯：https://jsfiddle.net/5fj7336t/2/
我想通了，該margin-left:60%;導致了問題。調整大小窗口在身體標記旁邊創建邊距
.bannerOverlay {
/*position*/
position: absolute;
width: 400px;
top: 350px;
margin-left: 60%;
padding: 10px; /*Readable text*/
color: white;
background-color: rgba(31, 31, 31, 0.5);
box-shadow: 0px 0px 20px black;
}
- 右側的「保證金」，並沒有出現在檢查元素工具餘量。
- 我正在使用瀏覽器重置模板。
- 即使身體是100％寬度，它仍然顯示邊距。
- 使用SASS生成我的CSS。 （我懷疑這會帶來什麼麻煩）
以下是我的CSS代碼和HTML代碼。我希望有人能幫我解決這個問題。
body {
font-family: 'Lato', sans-serif;
background-color: white;
width: 100%;
}
header {
position: fixed;
z-index: 999; /*overlay ALL*/
width: 100%;
height: 100px;
top: 0; /*Stay. Away.*/
background-color: #1f1f1f;
}
header div {
padding: 20px 0px 80px 0px;
width: 800px;
display: block;
margin: 0 auto;
}
header h1 {
display: block;
float: left;
color: #e7e5e5;
font-size: 2.5em;
font-weight: bold;
}
header h2 {
display: block;
color: #BFBFFF;
font-size: 0.9em;
position: absolute;
margin-top: 40px;
margin-left: 20px;
}
header nav {
float: right;
}
header nav ul {
padding-top: 42px;
}
header nav ul li {
display: inline-block;
text-align: center;
margin-right: 5px;
margin-left: 5px;
}
header nav ul li a {
text-decoration: none;
color: #e7e5e5;
opacity: 0.6;
}
header nav ul li a:hover {
border-bottom: 5px solid #eeeeee;
padding-bottom: 2px;
opacity: 1;
transition: opacity 0.25s ease-in;
-moz-transition: opacity 0.25s ease-in;
-webkit-transition: opacity 0.25s ease-in;
}
header nav ul li.current a {
border-bottom: 5px solid;
padding-bottom: 2px;
opacity: 1;
}
.banner {
top: 0;
margin-top: 100px;
height: 700px;
width: 100%;
position: fixed;
background-image: url(../Images/banner.jpg);
background-position: center;
background-repeat: no-repeat;
opacity: 0.8;
z-index: -1;
}
.bannerOverlay {
/*position*/
position: absolute;
width: 400px;
top: 350px;
margin-left: 60%;
padding: 10px; /*Readable text*/
color: white;
background-color: rgba(31, 31, 31, 0.5);
box-shadow: 0px 0px 20px black;
}
.bannerOverlay h2 {
font-size: 3em;
padding-bottom: 10px;
}
.bannerOverlay p {
line-height: 1.2em;
}
.fadeFix {
margin-top: 700px; /*banner size*/
height: 100px; /*100px overlay*/
background-color: white;
z-index: 2;
background: -moz-linear-gradient(bottom, white 0%, rgba(255, 255, 255, 0) 100%);/* FF3.6-15 */
background: -webkit-linear-gradient(bottom, white 0%, rgba(255, 255, 255, 0) 100%);/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0) 100%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.content {
height: 500px; /*temp filler*/
background-color: white;
z-index: 2;
}
.content .whiteBoxContent .intelBox {
width: 500px;
margin: 0 auto;
}
.content .whiteBoxContent .intelBox h2 {
font-size: 3em;
padding-top: 20px;
padding-bottom: 20px;
display: block;
text-align: center;
}
.content .whiteBoxContent .intelBox p {
display: block;
width: 500px;
text-align: center;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<link href="../CSS/browser_reset.css" rel="stylesheet" type="text/css" />
<link href="../SO/css.css" rel="stylesheet" type="text/css" />
<title>title</title>
</head>
<body>
<header>
<div>
<!-- divbox-->
<h1>title</h1>
<h2>sub</h2>
<nav>
<ul>
<li class="current">
<a href="#">Home</a>
</li>
<li>
<a href="#">n1</a>
</li>
<li>
<a href="#">n2</a>
</li>
<li>
<a href="#">n3</a>
</li>
<li>
<a href="#">n4</a>
</li>
<li>
<a href="#">n5</a>
</li>
<li>
<a href="#">n6</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="banner">
<!-- Fixed position -->
</section>
<section class="fadeFix">
</section>
<section class="content">
<div class="bannerOverlay">
<h2>title</h2>
<p>
content
</p>
</div>
<div class="whiteBoxContent">
<div class="intelBox">
<h2>title</h2>
<p>
content
</p>
</div>
</div>
</section>
</body>
</html>
我覺得'-webkit-box-reflect'有同樣的問題。 – LarsW
請創建一個工作jsfiddle與工作圖形和/或背景顏色 – Alex
正常化css你正在使用什麼？它是否重置了html和body maring和padding？背景圖像有多大？ – Alex