当前位置: 动力学知识库 > 问答 > 编程问答 >

html5 - CSS Horizontal Navigation Bar Alignment Problem in Firefox

问题描述:

My navigation bar is off in Firefox and Opera. There is noticeably more padding below the text than above. I've changed my code so many different times trying to fix this, so I apologize if there are errors in my current code. It looks fine in Safari and Chrome. Can anyone help find my error(s)?

CSS:

ul {

list-style-type: none;

margin: 0px;

padding: 0px;

margin-bottom: 50px;

}

li {

display: inline;

margin:0;

padding:0;

}

a.one:link,a.one:visited {

font-size: 18px;

line-height: 18px;

font-weight: bold;

background-color: red;

color: white;

font-family: Helvetica,Arial,san-serif;

text-align: center;

padding: 5px 7px;

text-transform: uppercase;

text-shadow: 0.05em 0.05em 0.1em #333;

letter-spacing: 1px;

}

HTML:

<nav>

<ul>

<li><a class=one href=index.html>home</a></li>

<li><a class=one href=bio.html>bio</a></li>

<li><a class=one href=news.html>news</a></li>

<li><a class=one href=disc.html>discography</a></li>

<li><a class=one href=contact.html>contact</a></li>

</ul>

</nav>

Thanks!

网友答案:

There is noticeably more padding below the text than above.

Here is the issue:

  • Since margin:0; and margin-bottom: 50px is set, the above/below ratio is 0px/50px

It looks fine in Safari and Chrome

Compare the default stylesheets:

  • WebCore(Safari): html.css

  • Mozilla(Firefox): html.css

  • Blink(Chromium/Opera): html.css

  • Internet Explorer User Agent Style Sheets

And lookup the vendor extensions:

  • Mozilla CSS Extensions: -moz-padding-start
分享给朋友:
您可能感兴趣的文章:
随机阅读: