我不是 css 专家，所以我可以在这里使用一些帮助。我设计的这个入口页面在除 IE 11(可能还有更早的 IE 版本)之外的所有浏览器中都可以正常工作。 http://src.wpl.ca/ IE 似乎忽略了我用来将“容器”类从标题和菜单向下移动的填充。我已经在谷歌和这里进行了搜索，但似乎找不到解决方案。
CSS:
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%;
font: inherit;
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;
}
/* CSS RESET DONE */
html,body { height: 100%; }
body {
color: #fff;
margin: 0 auto;
font: 1em/1.3em Helvetica, sans-serif;
background-color: #fff;
}
a {text-decoration: none;}
.header {
margin-bottom: 40px;
}
.clearfix {
clear: both;
}
.container {
z-index: 1;
position: relative;
padding: 140px 40px 0 40px;
text-align: center;
height: 100%;
font-size: large;
}
.container p {
padding: 0 0 15px 0;
}
.container.white {
background-color: #fff;
color: #007dc3;
}
.container.white a {
color: #7bc143;
}
.container.white a:hover {
color: #fcb034;
}
.container.blue {
background-color: #007dc3;
color: #fff;
}
.container.blue a {
color: #fcb034;
}
.container.blue a:hover {
color: #7bc143;
}
.container.green {
background-color: #7bc143;
color: #fff;
}
.container.green a {
color: #007dc3;
}
.container.green a:hover {
color: #fcb034;
}
.container.gold {
background-color: #fcb034;
color: #fff;
}
.container.gold a {
color: #007dc3;
}
.container.gold a:hover {
color: #7bc143;
}
h1 {
margin: 60px 0 60px 0;
font-size: 40px;
line-height: 40px;
font-family: 'Love Ya Like A Sister', 'cursive';
}
/* Menu Styles */
.menu-container {
width: 100%;
position: fixed;
height: 100px;
background-color: #fcb034;
background-image:url('http://src.wpl.ca/wp-content/uploads/2014/05/TDSRC_2014_logo.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right top;
z-index: 2;
}
.menu {
width: 100%;
position: relative;
height: 70px;
background-image:url('http://src.wpl.ca/wp-content/uploads/2014/05/menu-background.png');
background-repeat:repeat-x;
margin: 100px 0 0 0;
height: 70px;
z-index: 2;
}
.chester-circle {
position:absolute;
z-index:1;
left:20px;
top:-40px;
}
.menu-wrap {
height: 100%;
margin-left: 219px;
}
.menu a {
width: 142px;
height: 68px;
margin-left: -15px;
display: inline-block;
vertical-align: middle;
}
.menu a.club {
background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-the-club.png') left top no-repeat;
}
.menu a.contests {
background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-Contests.png') left top no-repeat;
}
.menu a.chapter {
background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-chapter.png') left top no-repeat;
}
.menu a.things {
background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-things.png') left top no-repeat;
}
.menu a.tell {
background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-tell.png') left top no-repeat;
}
.menu a.what {
background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-what.png') left top no-repeat;
}
.menu a:hover {
background-position: left -70px;
}
.twocol {
width: 100%;
}
.twocol h1 {text-align:center}
.twocol h2 {
margin: 30px 0 30px 0;
font-size: 30px;
line-height: 40px;
font-family: 'Love Ya Like A Sister', 'cursive';
text-align:center
}
.twocol img {
margin: auto;
}
.col1 {
float: left;
width: 600px;
text-align: left;
}
.col2 {
margin-left: 600px;
text-align: left;
}
.indent {
margin-left: 20px;
}
.italics {
font-style:italic;
}
HTML:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Waterloo Public Library's </br>2014 Summer Reading Club</title>
<link href="style-home.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href='http://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="menu-container">
<div class="menu">
<div class="chester-circle">
<img src="images/menu-chester.png" width="155" height="155" />
</div>
<div class="menu-wrap">
<a class="club active" href="#club"></a>
<a class="contests" href="#contests"></a>
<a class="chapter" href="#chapter"></a>
<a class="things" href="#things"></a>
<a class="tell" href="#tell" ></a>
<a class="what" href="#what"></a>
</div>
</div>
</div>
<div id="club" class="container white">
<h1>The Waterloo Public Library's </br>2014 Summer Reading Club</h1>
<div class="twocol">
<div class="col1">
<img src="/images/TDSRC_2014_teaser_vertical_english_1_.png">
</div>
<div class="col2">
<p class="italics">Welcome to the 2014 WPL Summer Reading Club!</p>
<p>Spend your summer reading and you could earn incentives (a fancy word for "cool stuff"), chances at weekly prizes as well as a chance at the stupendous (another fancy word for "really cool stuff") grand prize at the end of the summer.</p>
<p>
The club runs from July 2 to August 23. Sign up at any of our locations.
<a href="http://src.wpl.ca/about">For more details click here</a>
.
</p>
<p>
This summer's theme is Eureka! and all things maker. At all locations all summer long there will be
<a href="#things">astounding programs and events</a>
. Starting with The Eureka Kickoff party at McCormick July 2.
</p>
<p>
And there's even more! We have monthly
<a href="#contests">contests</a>
,
<a href="#chapter">the Chapter Book Challenge</a>
,
<a href="#tell">sharing your own summer stories</a>
, and lots more.
</p>
<h2>
<a href="http://src.wpl.ca/main">Enter The WPL Summer Reading Club Site For More Information</a>
</h2>
</div>
</div>
</div>
<div id="contests" class="container white">
<h1>Contests</h1>
<div class="twocol">
<div class="col1">
<p class="italics">Win! Win! Win!</p>
<p>Every month this summer you'll have a chance to win a snazzy prize when you enter any of our contests at all our locations.</p>
<p class="indent">In June look for the Eureka Word Search. How many words can you find?</p>
<p class="indent">Then in July it's time to set out on a Scavenger Hunt.</p>
<p class="indent">And finally in August get out your magnifying glass for a challenging game of I Spy.</p>
<p>Good luck!</p>
<h2>
<a href="http://src.wpl.ca/contests">Details At Our Contest Page</a>
</h2>
</div>
<div class="col2">
<img src="/images/look.png">
</div>
</div>
</div>
<div id="chapter" class="container white">
<h1>Chapter Book Challenge</h1>
<div class="twocol">
<div class="col1">
<img src="/images/book_mouse.png">
</div>
<div class="col2">
<p>
Thought
<span class="italics">Harry Potter</span>
was the greatest series ever written? Or did you think it was as boring as counting grains of sand in your kid brother's sandbox?
<span class="italics">Diary of a Wimpy Kid</span>
made you laugh so hard that milk spewed from your nose (and you weren't even drinking milk)? Or was it so unfunny that it made you yawn so much your jaw fell off?
</p>
<p>Did you find a hidden gem of a book that you can't wait to share with the world (or at least Waterloo)? Or did you find a book so bad you want to warn others from ever falling prey to it's horridness ever again?</p>
<p>Then tell us about it! Not only will you be an internet sensation but you may win a prize. A very cool, top secret prize.</p>
<h2>
<a href="http://src.wpl.ca/chapter-book-challenge">For Complete Details Check Out The Chapter Book Challenge Page</a>
</h2>
</div>
</div>
</div>
<div id="things" class="container white">
<h1>Things To Do At The Library</h1>
<div class="twocol">
<div class="col1">
<p class="italics">Mooooommmmm! I'm bored!</p>
<p>If you're looking for something to do this summer head on over to any of our locations for amazing events and programs. From babies to tweens we have something for everyone.</p>
<p>Lots and lots of stories, robot building, art meets science, getting ready for kindergarten, experiments for little scientists, crime solving for budding detectives, hands on crafts, computer programming, and so much more!</p>
<p>How could you possibly be bored?</p>
<h2>
<a href="http://src.wpl.ca/programs">For a Complete List of All Our Programs Click Here</a>
</h2>
</div>
<div class="col2">
<img src="/images/mouse_trampoline.png">
</div>
</div>
</div>
<div id="tell" class="container white">
<h1>Tell Us!</h1>
<div class="twocol">
<div class="col1">
<img src="/images/tincan_mice-2.png">
</div>
<div class="col2">
<p>It was the best of summers. It was the worst of summers.</p>
<p>It was a summer of swimming. It was a summer of spilled ice cream.</p>
<p>It was a summer of unexpected adventure. It was a summer of bee stings and mosquito bites.</p>
<p>What is your summer like? Fun, boring, silly, itchy? Share your stories with us.</p>
<h2>
<a href="http://src.wpl.ca/tell-us">Share Your Stories Here</a>
</h2>
</div>
</div>
</div>
<div id="what" class="container white">
<h1>What To Read</h1>
<div class="twocol">
<div class="col1">
<p>
Read every
<span class="italics">Geronimo Stilton</span>
book? Finished
<span class="italics">Harry Potter</span>
in a weekend? Solved all the
<span class="italics">Hardy Boys</span>
?
<span class="italics">Nancy Drew</span>
?
<span class="italics">And Then It Happened</span>
has all happened?
<span class="italics">Diary of a Wimpy Kid</span>
is finished like Greg's dream of pumping iron?
</p>
<p>You're wandering around the shelves looking for your next read but have no idea where to look? Then check out these suggested reading lists. Hand picked by the staff just for you!</p>
<h2>
<a href="http://src.wpl.ca/suggested-books">All Our Suggestions Can Be Found Here</a>
</h2>
</div>
<div class="col2">
<img src="/images/chipmunkmagazine.png">
</div>
</div>
</div>
</body>
</html>
谢谢。
最佳答案
我检查了我的IE 11是否出现这个问题，虽然我很努力，但它没有出现。但是，您可以尝试以下操作:
尝试硬刷新您的 IE (ctrl + f5)
将
float: left;添加到您的 .container 规则中。不要在 css 文件开头编写每个标签，而是编写 *，例如:
而不是:
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%;
font: inherit;
vertical-align: baseline;
}
搭配:
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
希望对你有帮助:)
关于html - IE 11 无法正确显示 CSS 填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23941038/