图像在JSFiddle中对齐，但在浏览器中不正确

Question

在过去的几天里，我一直在忙着编写我的投资组合。现在我已接近完成它，我突然面临一个问题：

标题中的社交媒体图标在我的联系页面上没有正确对齐，尽管它们在其他页面上正确显示（具有完全相同的代码）。现在，当我将页面上传到JSFiddle时，一切都正常运行。

它在我的浏览器上的显示方式

JSFiddle：http://fiddle.jshell.net/ydgyscoq/7/show/

如果您需要更多信息，请与我们联系，但请提前致谢！

Answer 1

这些图标正在清除中间的非浮动列表项（您的按钮）。您可以重新订购HTML以克服此问题：

<ul>
    <li class="lileft"><a href="index.html"><img src="http://u.cubeupload.com/Levano/home.png" /></a></li>
    <li class="liright"><a href="http://www.twitter.com"><img src="http://u.cubeupload.com/Levano/twitter.png" alt="Twitter" title="Follow me on Twitter" /></a></li>
    <li class="liright"><a href="http://www.facebook.com"><img src="http://u.cubeupload.com/Levano/facebook.png" alt="Facebook" title="Like me on Facebook" /></a></li>
    <li class="limid"><a href="aboutme.html">over mij</a></li>
    <li class="limid"><a href="projects/collection.html">projecten</a></li>
    <li class="limid"><a href="contact.html">contact</a></li>
</ul>

如果是我个人的话，我至少会有一个容器来分组相关的项目，这也可以帮助你解决浮动问题。

Answer 2

JSFiddle运行良好的一个主要原因是使用reset.css。使用以下之一：

• CSS Reset
• Eric Meyer Reset CSS
• YUI CSS Reset

另一件事是使用标准字体。 JSFiddle坚持与家人："Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif。

您可以尝试以上两个建议，其中一个可能适合您！检查所有文件的引用，并检查控制台中任何404错误，以查找包含不存在文件的引用。