![](/img/trans.png)
[英]Why does a floated <input> control in a floated element slide over too far to the right in IE7, but not in Firefox?
[英]Trying to find why these floated LIs don't align in IE7
这是相关页面:[已编辑]
该菜单在Firefox,Safari,Chrome和IE8 +中看起来很棒。 但是在IE7中,LI垂直堆叠。 如果尚未安装IETester,请下载IETester以了解我的意思。
这是我的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>
以及相应的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;
}
任何见解非常感谢。
为每个li元素定义一个宽度。
不要浮动您的A
标签。 您已经在浮动LI包装器。 另外,别忘了在列表末尾清除浮点数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.