Question

我有一个HTML分配，我必须重现这个页面......

https://gyazo.com/b9f77a413c0c0e55aaa294ed5b3c346a

然而，当我在我的Mac上运行它时会产生这个结果。

https://gyazo.com/06ecff49a788d4f18bc451a5195571c3

这是我的代码（它被编码为正确显示教授想要的内容 - 由教授确认）：

<!DOCTYPE html/>
<html>
    <head>
        <title>Question One</title>
        <h1>Exercise on HTML5 Lists</h1>
    </head>
    <body>
        <dl>
            <dt>term 1 (definition list)</dt>
            <dd>
                term 1 description
                <ol>
                    <li>ol list item 1</li>
                    <li>ol list item 2</li>
                    <ul>
                        <li>ul list item 1</li>
                        <li>ul list item 2</li>
                    </ul>
                </ol>   
            </dd>   
        </dl>
        <dl>
            <dt>term 2 (definition list)</dt>
            <dd>
                term 2 description
                <ul>
                    <li>ul list item 3</li>
                    <li>ul list item 4</li>
                        <ol>
                            <li>ol list item 3</li>
                            <li>ol list item 4</li>
                        </ol>
                    <li>ul list item 5</li>
                    <li>ul list item 6</li>
                </ul>
            </dd>
        </dl>
    </body> 
</html>

这在使用linux和firefox的PC上完美运行，但是当我尝试在我的Macbook Pro上的Chrome或Safari上打开它时，它会加载这些空行。使用macbook pro和chrome，我还使用了一个在线HTML编辑器，它产生了同样的错误结果。我在我的Mac上尝试了Firefox，但同样的事情发生了！我甚至向我的教授展示了这一点，甚至他也不知道为什么这样做。非常感谢！

Answer 1

只需要一点CSS：

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 0;
}

Fiddle

Answer 2

每个浏览器都有自己的内部样式表。这就是每个浏览器显示不同结果的原因。

我建议使用 normalize.css 一致地渲染所有元素。

HTML文档无法在OSX上的浏览器上正确显示

2 个答案: