我没有css的专家，所以我可以在这里使用一些帮助。我设计的这个入口页在除IE 11（以及可能早期的IE版本）之外的所有浏览器中都能正常工作。 http://src.wpl.ca/ IE似乎忽略了用于移动＆＃34;容器＆＃34;的填充。从标题和菜单中分类。我已经在谷歌和这里进行了搜索，但似乎无法找到解决方案。
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>
感谢。
答案 0 :(得分：1)
我检查了我的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;
}
我希望它有所帮助：）
答案 1 :(得分：1)
如果问题仍然存在，您可以使用以下js库：
对于浏览器特定的css文件，我建议：
简单的解决方案，只需使用此JS库，您就可以轻松地为每个浏览器/操作系统组合应用样式：
通过这个，您将在body标签上获得一个类名，其中包含浏览器的当前名称和版本以及使用过的操作系统。
包含文件后：
<script src="js/browserclass.js"></script>
例如，在最新的Windows 8.1上，您将看到：
<body class="ie ie11 win desktop">
在您的样式文件中，您可以参考： （.sass造型）
body.ie11
注意： IE中的条件注释仅适用于IE9！