【发布时间】：2012-10-20 23:19:13
【问题描述】：
有关问题页面的实时视图，请访问此处：http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/
问题 1：如果您转到该链接并滚动下拉导航并且它是子项，您会注意到我在 mouseenter 上的每个 li 上制作了一个星形背景图像。然而，当你第一次在 IE8 中翻转它时，它会从 li 的中间开始动画，即使我指定了 background-position: -25px 50%;，奇怪的是一旦 jquery 内联应用相同的设置，它就会开始按预期工作。
问题 2： 如下图所示，IE8 （这在 IE7 中可以正常工作） 错误地渲染了我的填充。我在core.css 中使用* {margin: 0; padding: 0;} 重置了所有边距和填充：
此导航栏的 HTML 标记为：
<header class="one">
<nav class="container_16 clearfix" id="breadcrumbs">
<a href="http://rcnhca.org.uk/sites/first_steps" id="home"></a>
<ul id="parent">
<li>
<a href="http://rcnhca.org.uk/sites/first_steps/communication/">Communication</a>
<ul class="child">
<li><a href="http://rcnhca.org.uk/sites/first_steps/getting-started/">Getting started</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/">Health, Safety and Security</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/">Personal and people development </a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/quality/">Quality</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/equality-diversity-and-rights/">Equality, diversity and rights </a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/clinical-skills/">Clinical skills</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/additional-material/">Additional material</a></li>
</ul>
</li>
<li>
<a href="#">Select a topic</a>
<ul class="child">
<li><a href="http://rcnhca.org.uk/sites/first_steps/communication/why-communication-is-important/">Why communication is important</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/communication/communication-methods/">Communication methods</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/communication/written-communication/">Barriers to communication</a></li>
</ul>
</li>
</ul>
</nav>
</header>
以及要启动的 CSS：
header {
width: 100%;
}
header.one {
height: 50px;
background: #44a9c4;
}
header.two {
height: 45px;
background: #3393b5;
}
/* =============================================================================
Breadcrumb navigation
========================================================================== */
#breadcrumbs {
padding: 0 3px 3px 0;
background: #ffffff;
border: 0px solid;
border-left: #3a90a7 2px solid;
border-right: #3a90a7 2px solid;
border-bottom: #3a90a7 2px solid;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#breadcrumbs #home{
display: block;
height: 39px;
width: 55px;
float: left;
background-image: url(library/images/home_icon.png);
background-repeat: no-repeat;
background-position: center;
text-indent: -999em;
}
#breadcrumbs ul#parent {
height: 39px;
width: 905px;
float: right;
position: relative;
background: #f38630;
border: 0px solid;
-webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
-moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
box-shadow: inset 0px -2px 0px 0px #cf7229;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#breadcrumbs ul#parent li {
position: relative;
height: 39px;
float: left;
min-width: 1px; /* required to fix Opera bug */
padding: 0 47px 0 15px;
background-image: url(library/images/breadcrumb_seperator.png);
background-repeat: no-repeat;
background-position: right;
line-height: 39px;
}
#breadcrumbs ul#parent li a {
display: block;
height: 42px;
font-size: 0.938em;
font-weight:900;
letter-spacing: 0.01em;
color: #ffffff;
text-decoration: none;
text-shadow: 0px 2px 0px #cf7229;
}
#breadcrumbs ul li a:visited {
color: #ffffff;
}
#breadcrumbs ul#parent li:first-child ul {
left: -5px;
}
#breadcrumbs ul#parent li ul {
position: absolute;
z-index: 1;
left: -28px;
top: 42px;
background: #ffffff;
border-left: #3a90a7 2px solid;
border-right: #3a90a7 2px solid;
border-bottom: #3a90a7 2px solid;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.js #breadcrumbs ul#parent li ul {
display:none;
}
.no-js #breadcrumbs ul#parent li ul {
left: -999em;
}
#breadcrumbs ul#parent li ul li {
float: none;
height: 26px;
margin: 0 3px 3px 3px;
padding: 0 15px;
background-image: url(library/images/star-icon.png);
background-position: -25px center;
background-repeat: no-repeat;
background-color: #738793;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
line-height: 26px;
white-space: nowrap;
}
#breadcrumbs ul#parent li ul li a{
color: #ffffff;
text-decoration: none;
text-shadow: none;
letter-spacing: 0.01em;
font-weight: 100;
}
#breadcrumbs ul#parent li ul li:hover{
background-color: #3393b5;
}
.no-js #breadcrumbs ul#parent li ul li:hover{
background-position: 6px center;
text-indent: 10px;
}
#breadcrumbs ul#parent li:hover ul {
z-index: 2;
}
.no-js #breadcrumbs ul#parent li:hover ul {
left: -5px;
}
我花了很长时间试图调试这个问题，但无法弄清楚为什么会发生这种情况，如果有人能对这个问题有所了解，那就太好了。 （注意：我使用HTML5SHIV 在旧版浏览器中呈现 HTML5 元素）
【问题讨论】：
标签： css html internet-explorer cross-browser