[英]Trying to find why these floated LIs don't align in IE7
Here is the page in question: [redacted] 这是相关页面:[已编辑]
The menu looks great in Firefox, Safari, Chrome, and IE8+. 该菜单在Firefox,Safari,Chrome和IE8 +中看起来很棒。 But in IE7, the LIs are stacked vertically.
但是在IE7中,LI垂直堆叠。 You can download IETester if you don't already have it to see what I mean.
如果尚未安装IETester,请下载IETester以了解我的意思。
Here's my HTML: 这是我的HTML:
<ul id="menu">
<li class="you"><a href="">You</a></li>
<li class="us"><a href="">Us</a></li>
<li class="contact"><a href="">Contact</a></li>
<li class="insurance"><a href="">Insurance</a></li>
<li class="services"><a href="">Services</a></li>
<li class="blog"><a href="">Blog</a></li>
</ul>
And the corresponding CSS: 以及相应的CSS:
#header #menu {
position: absolute;
bottom: 40px;
right: 22px;
float: right;
}
#menu,
#menu li {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
}
#menu a {
display: block;
float: right;
width: 76px;
height: 25px;
padding: 45px 0 5px 0;
text-align: center;
text-decoration: none;
color: #555;
font-size: 90%;
border: 1px solid #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu .you a {
background: url(img/icon_you.gif) center 9px no-repeat;
}
#menu .blog a {
background: url(img/icon_blog.gif) center 9px no-repeat;
}
#menu .us a {
background: url(img/icon_us.gif) center 9px no-repeat;
}
#menu .insurance a {
background: url(img/icon_insurance.gif) center 9px no-repeat;
}
#menu .contact a {
background: url(img/icon_contact.gif) center 9px no-repeat;
}
#menu .services a {
background: url(img/icon_services.gif) center 9px no-repeat;
}
#menu a:hover {
background-color: #f6f5f3;
border: 1px solid #e5e2dd;
color: #2871ad;
}
Any insights greatly appreciated. 任何见解非常感谢。
为每个li元素定义一个宽度。
Don't float your A
-tags. 不要浮动您的
A
标签。 You're already floating the LI wrapper. 您已经在浮动LI包装器。 Also, don't forget to clear your floats at the end of your list.
另外,别忘了在列表末尾清除浮点数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.