我在仅出现在 Firefox 中的导航菜单上有一个奇怪的问题(在 IE7、8、9、10 和 Chrome 中运行良好)。菜单上的链接显示为块,但是它们在 Firefox 中计算得比任何其他浏览器都大(宽度更大),因此它们不能正确对齐。奇怪的是,一旦点击了链接,即使是右键单击,Firefox 也会将它们置于应有的状态。
CSS 已被重置,并且这个问题发生在 Firefox 中,所以我认为这是一个 Firefox 错误?
<nav>
<ul id="primary-nav">
<li><a id="nav-home" href="/wordpress">HOME</a></li>
<li><a id="nav-work" href="/wordpress/work">WORK</a></li>
<li><a id="nav-about" href="/wordpress/about">ABOUT</a></li>
<li><a id="nav-contact" href="/wordpress/contact">CONTACT</a></li>
<li><a id="nav-blog" href="">BLOG</a></li>
</ul>
</nav>
ul#primary-nav li {
float: left;
list-style-type: none;
background: none;
padding: 0;
margin-left: 25px;
}
ul#primary-nav li a {
font-size: 1.5em;
display: block;
padding-top: 40px;
}
ul#primary-nav li a#nav-home {
background: url('./images/nav-home-button.png') top center no-repeat;
}
ul#primary-nav li a#nav-work {
background: url('./images/nav-work-button.png') top center no-repeat;
}
ul#primary-nav li a#nav-about {
background: url('./images/nav-about-button.png') top center no-repeat;
}
ul#primary-nav li a#nav-contact {
background: url('./images/nav-contact-button.png') top center no-repeat;
}
ul#primary-nav li a#nav-blog {
background: url('./images/nav-blog-button.png') top center no-repeat;
}
ul#primary-nav li a:first-letter {
font-size: 1.3em;
}