html - Firefox/其他浏览器之间的对齐偏移

Question

http://jsfiddle.net/Fy5v8/

我没能解决这个问题，或者以前见过它——它很微妙，但我当然希望它是完美的。我看不出有什么理由会奇怪地显示它。

图像的底部和导航应该对齐，但没有对齐。这是 firefox 中的错误版本:

http://jamimiles.com/firefox.png

或者在您自己的浏览器上访问它。非常感谢您的帮助!

#header {
font-family: georgia, serif;
width:800px;
height:65px;
font-size:20px; font-size:2rem;
color:#3a3b59;
text-transform: uppercase;
text-align:left;
padding:0 0 30px 0;
margin-top:0;
border-bottom: none;
float:left;
position:relative;
}
#header ul li {
list-style-type:none;
line-height:20px; line-height:2rem;
float:right;
}

#header li {
padding-left:20px;
}

#header ul {
margin-top:52px;
padding:0;
float:right;
margin-bottom:0;
}

#header img {
padding:0; 
border:none;
float:left;
}

这就是 CSS。这是标题栏。

    <div id="header">
    <a href="index.html"><img src="images/namebanner3.png"></a>
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="portfolio.html">portfolio</a></li>
                            <li><a href="JamiMiles_Resume.pdf" target="blank">resum&eacute;</a></li>
            </ul>
</div>

Answer 1

尝试调整 img px。您当前设置为 851px x 141px

<img  height="#" width="#" style="-webkit-user-select: none"     

 src="http://jamimiles.com/firefox.png">