Chrome 偶尔会以不同的方式呈现我的 HTML/CSS答案

【问题标题】：Chrome occasionally renders my HTML/CSS differentlyChrome 偶尔会以不同的方式呈现我的 HTML/CSS
【发布时间】：2013-08-19 18:11:12
【问题描述】：

我刚开始学习 HTML/CSS，正在尝试从头开始制作个人网站（没有 CSS 工具）

当我昨晚在 Firefox 和 IE 中测试我的网站时，它看起来很干净整洁

当我在 Chrome 中测试我的网站时，我的链接被移动了：

有人知道这里发生了什么吗？这是我的标记：

<!DOCTYPE html>
<html>
    <head>
        <title>Home | Some Website!</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            body {
                width: 960px;
                font-size: small;
                font-family: Verdana, Helvetica, Arial, sans-serif;
                line-height: 1.6em;
                background-color: #FFFFF0;
                margin: 0 auto;
            }

            #header {
                border-style: solid;
            }
            #header img {
                margin: 4px 0px 0px 4px;
            }

            #header ul {
                list-style-type: none;
                display: inline;
                margin: 25px 30px 0px 0px;
                float: right;
                font-size: x-large;
            }

            #header ul li {
                display: inline;
                margin: 0 30px;
            }

            #header li a:link {
                color: #FF00FF;
                text-decoration: none;
            }

            #header li a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <img src="http://i.imgur.com/YbAx7y1.png" alt="Temp Logo!">
            <ul>
                <li><a href="about.html">About Me</a></li>
                <li><a href="resume.html">R&eacute;sum&eacute;</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </body>
</html>

【问题讨论】：

我也没有问题！它看起来就像在 Firefox 图像中一样。
jsfiddle.net/dZJEr 我也没有问题。
我在实际的 chrome 中作为文件运行，但它确实显示不正确。
您应该尝试使用CSS reset stylesheets 以确保您所做的所有 CSS 修改最终将在任何浏览器上给出相同的结果。
在 Chrome v.28 中对我来说很好

标签： html css

【解决方案1】：

将#header ul css 定义从display: inline; 更改为display: inline-block;。

【讨论】：

哦，好主意！感谢您的提示，我对这件事还是很陌生:)

【解决方案2】：

每个浏览器都有不同的解释。您应该比body { font-size: small } 更具体。我建议使用 px 值，除非您真的打算将其留给浏览器。

【讨论】：