IE 11 未正确显示 CSS 填充
Posted
技术标签:
【中文标题】IE 11 未正确显示 CSS 填充【英文标题】：IE 11 not displaying CSS padding correctly 【发布时间】：2014-07-19 09:55:02 【问题描述】：我不是 css 专家，所以我可以在这里寻求帮助。我设计的这个入口页面在除 IE 11（可能还有更早的 IE 版本）之外的所有浏览器中都能正常工作。 http://src.wpl.ca/ IE 似乎忽略了我用来将“容器”类从标题和菜单中向下移动的填充。我已经在 Google 和这里进行了搜索，但似乎找不到解决方案。
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" />
</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>
谢谢。
【问题讨论】：
是否有可能缓存了一些数据？如果您清除缓存，它仍然会失败吗？ 也许这会有所帮助：***.com/questions/9906794/… 很确定这不是缓存问题，因为它发生在不同的计算机上。 【参考方案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;
希望对你有帮助:)
【讨论】：
不是每个标签，例如列表中没有input 或select。为某些元素重置默认填充可能会产生比它解决的问题更多的问题，这就是为什么明确列出要重置的元素比使用通用选择器更好。
这很奇怪。我已经在不同的机器上尝试过它仍然无法正常工作。 （在一台计算机上，网络字体也不起作用，但这是次要的）。
@IlyaStreltsyn *:not(input):not(select) ... 会起作用，即使它不能解决主要问题。【参考方案2】：
或者如果问题仍然存在，您可以使用以下 js 库：
IE 11 特定的 CSS
对于浏览器特定的 css 文件，我会推荐：
简单的解决方案，只需使用这个 JS 库，您就可以轻松地为每个浏览器/操作系统组合应用样式：
BrowserClass.js
这样，您将在 body 标记上获得一个类名，其中包含当前名称和浏览器版本以及使用的操作系统。
包含文件后：
<script src="js/browserclass.js"></script>
例如在带有最新 ie 的 Windows 8.1 上，您将看到：
<body class="ie ie11 win desktop">
在您的样式文件中，您可以参考： （.sass 样式）
body.ie11
注意： IE 中的条件注释仅适用于 IE9！
【讨论】：
我会试试这个。谢谢！ 提供的链接BrowserClass.js（又名http://browserclass.org/）不再存在。我在尝试访问它时遇到网络错误。以上是关于IE 11 未正确显示 CSS 填充的主要内容，如果未能解决你的问题，请参考以下文章