我一直在使用 Ethan Marcotte 的响应式网页设计书中的策略优化我一直在为手机开发的网站，并添加 float:none !important;我清除了以前的 float ，但网站右侧有额外的空白区域，导致不必要的滚动。我已经尝试将 overflow-x:hidden 应用到 #image div 和 html, body, - 但它似乎不起作用。我还尝试使用 http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/ 查找幽灵元素，但这也没有把我带到任何地方。如果有人可以帮助我解决这个问题，那就太好了，谢谢!
网站:cristinalord.com
HTML:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cristina Lord</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="site_title1">
Cristina Lord
</div>
<div id="site_title2">
Composer, Pianist
</div>
</div>
<div id="content">
<div id="menu">
<ul>
<li class="selected"><a href="about.html">About</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="images">
<img src="images/cristina.png" alt="Cristina Lord">
</div>
<div id="about">
<p>Cristina is currently a senior at the University of California, Santa Barbara, where she is completing her B.A. degree in Music Composition at the College of Creative Studies. She will be pursuing her masters at Cal State Long Beach in the fall. While at UCSB, she has studied composition under William Kraft, Dr. Leslie Hogan, and Dr. Jeremy Haladyna, piano with Dr. Charles Asche, and conducting with Christopher Rountree.</p>
<br>
<p>Cristina has worked as a piano teacher for the Santa Barbara School of Music for the past three years. She also regularly sings for the English Broadside Ballad Archive at UCSB, and is a member of the contemporary choral ensemble New Century Voices.</p>
<br>
<p>Last year (2013), Cristina won a Corwin Award in the vocal category for her song cycle, Songs of American Women, which will be performed this year by the Ensemble for Contemporary Music and at the Primavera Festival at UCSB.</p>
</div>
</div>
<div id="footer">
<footer>
<p>Copyright Cristina Lord 2014 ©</p>
<a href="http://www.facebook.com/cristina.lord"><img src="images/facebooklogo.png" height="40" width="40" alt="Facebook"></a>
<a href="http://www.soundcloud.com/cristina_lord"><img src="images/soundcloudlogo.png" height="40" width="76" alt="SoundCloud"></a>
</footer>
</div>
</div>
</body>
</html>
CSS:相关的 CSS 是:
/* media queries for different sizes */
@media screen and (max-width: 768px){
#images{
min-width: 100%;
float: none !important;
text-align: center;
}
#about{
text-align: center;
}
}
所有的CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*CUSTOM FONTS*/
@font-face{
font-family: 'OpenSans';
src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
font-weight: bolder;
}
@font-face{
font-family: 'OpenSans';
src: url('../fonts/OpenSans-Light.ttf') format('truetype');
}
@font-face{
font-family: 'OpenSans';
src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
font-weight: bold;
}
/* main font style, background color, and body paddings */
body{
background-color: rgb(255,255,240);
color:black;
font-family: 'OpenSans';
padding: 03.515625% 7.8125% 0% 7.8125%; /* 45, 100, 0, 100 / 1280px */
text-align: left;
line-height: 1.25em;
}
/* main header style */
div#site_title1
{
color:rgb(188,143,143);
font-size: 1.75em; /* 28px / 16px */
padding-bottom: 0.35714285714286em; /* 10 / 28px */
font-family: 'OpenSans';
font-weight: bolder;
letter-spacing: 0.07142857142857em; /* 2 / 28px */
}
div#site_title2
{
color:rgb(188,143,143);
font-size: 1.25em; /* 20px / 16px */
padding-bottom: 0.25em; /* 5 / 20px */
font-family: 'OpenSans';
font-weight: bold;
letter-spacing: 0.1em; /* 2 / 20px */
}
/*menu style*/
div#menu ul a
{
font-size: 1.125em; /* 18 / 16px */
padding-bottom: 0.55555555555556em; /* 10 / 18px */
text-decoration: none;
transition: color 0.5s ease;
border-color: rgb(255,255,240);
}
div#menu li
{ display: inline;}
div#menu ul a:hover
{
color:rgb(188,143,143);
border-bottom: 0.11111111111111em solid #BC8F8F; /* 2 / 18px */
transition: border-color 0.5s ease;
}
div#menu
{word-spacing:0.27777777777778em; /* 5 / 18px */
text-align: center;}
#menu, #menu a {
padding:0.55555555555556em 0.55555555555556em 1.11111111111111em 0.55555555555556em; /* 10 20 10 10 / 18px */
margin-bottom: 0.55555555555556em; /* 10 / 18px */
}
div#menu li.selected a { color:rgb(188,143,143);border-bottom: 0.11111111111111em solid #BC8F8F;}
/* about and image positioning */
div#about
{
max-width: 49.074074074074%; /* 530 / 1080px */
font-size: 1em;
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
line-height: 140%;
}
div#images
{
float:right;
padding-right: 7.8125%;
padding-left: 1.388888888889%; /* 15 / 1080px */
padding-bottom: 1.388888888889%; /* 15 / 1080px */
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
width: 42.87037037037%; /* 463 */
height:28.703703703704%; /* 310 */
overflow: hidden;
}
/* event headers and text */
div#header{
text-align: center;
}
.eventheader
{
color:rgb(188,143,143);
font-size: 1.125em; /* 18 / 16px */
font-weight: bold;
text-align: center;
}
.eventsubheader
{
color:#000;
font-weight: bold;
text-align: center;
}
.eventtext
{
width: 37.037037037037%; /* 400 / 1080px */
margin-right: auto;
margin-left: auto;
position: center;
text-align: center;
}
/* horizontal images - to be implemented */
#horizontalimage{
overflow: hidden;
width: 100%; /* 1080 / 1080px */
height:50%; /* 400 / 800px */
position: relative;
box-shadow: 0 0 1em black;
}
#horizontalimage img {
display: block; /*removes inline element space for text */
}
span {
position: absolute;
font-family: "OpenSans" ;
font-weight: bold;
font-size: 1.75em; /* 28 / 16px */
color: rgb(188,143,143);
bottom: 40%;
text-align: left;
left: 0;
width:100%;
background: rgba(0,0,0,0.7);
padding-left: 10% !important; /* important overrides padding 2.5 for left */
padding:2.5%; /* 10 / 1080px */
}
/* table positioning/style */
th{
padding-bottom: 1%;
padding-top: 2%;
width: 250px;
}
td{
padding:1%;
width: 250px;
}
div#tablelist{
color:#000;
font-size: 0.875em; /* 14 / 16px */
text-align: center;
margin-left: auto;
margin-right: auto;
}
#tablelist, #tablelist a {
padding-left:1.42857142857143em;
padding-right: 1.42857142857143em;
padding-bottom: 1.42857142857143em;
}
table {
text-align: center;
margin-right: auto;
margin-left: auto;
}
/* footer style */
html,
body {
height:100%;
margin:0;
}
#wrapper {
min-height:100%;
position: relative;
width: 100%;
margin: 0 auto;
}
#content {
padding-bottom:80px; /* 10 px added for extra padding between text and footer */
overflow: auto;
}
#footer {
border-top: 2px solid rgb(188,143,143);
bottom:0;
height:70px;
left:0;
position:absolute;
text-align: center;
width:100%;
font-size: 0.75em; /* 12 / 16px */
}
body {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* MISC. */
a:hover {color:rgb(188,143,143);}
.line{
width:38%;
margin-left: auto;
margin-right: auto;
}
a{text-decoration: none;
color:#000;
transition: color 0.5s ease;
}
div#musicheader
{
color:rgb(188,143,143);
font-size: 1.25em; /* 20 / 16px */
padding-bottom: 0.25em; /* 5 / 20px */
font-family: 'OpenSans';
font-weight: bold;
letter-spacing: 0.1em; /* 2 / 20px */
}
.issuuembed{
margin: 0 auto;
}
#floatleft{
float:left;
}
.floatleftmulti{
float:left;
}
#floatright{
float: right;
}
/* media queries for different sizes */
@media screen and (max-width: 768px){
#images{
min-width: 100%;
float: none !important;
text-align: center;
}
#about{
text-align: center;
}
}
@media screen and (max-width: 1024px){
#about{
min-width: 100%;
}
}
/*fadein and center*/
div#contenttext{
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
text-align: center;
margin-left: auto;
margin-right: auto;
}
div#musiccontent{
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.eventcontent{
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
}
/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
最佳答案
尝试将 paddings 添加到 0:
/* media queries for different sizes */
@media screen and (max-width: 768px){
#images{
min-width: 100%;
float: none !important;
padding: 0 !important; /* <-----add this to see */
text-align: center;
}
#about{
text-align: center;
}
}
这也可能导致您将填充应用到 body 本身的问题，您也可以避免这种情况:
/* media queries for different sizes */
@media screen and (max-width: 768px){
body{
padding:0 !important; /* <-----add this to see */
}
#images{
min-width: 100%;
float: none !important;
padding: 0 !important; /* <-----add this to see */
text-align: center;
}
#about{
text-align: center;
}
}
关于html - 添加 float 时的空白 : none to image，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23849841/