网站在除 Google Chrome 之外的所有浏览器中看起来都不同答案

【问题标题】：Website looking different in all browsers except Google Chrome网站在除 Google Chrome 之外的所有浏览器中看起来都不同
【发布时间】：2016-10-25 17:41:38
【问题描述】：

所以我正在练习一些初学者的 HTML 和 CSS，并且我正在开发这个演示站点。我在 Chrome 中得到了我想要的一切，当我在其他浏览器（Edge、Firefox 和 Internet Explorer）中测试它时，顶部的菜单栏在每个浏览器上都放错了位置。要么太高要么太低。

这是怎么回事？

https://jsfiddle.net/o51km0ub/

 <head>
    <title>how to make a web site : demo site</title>
    <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="page">
        <div id="site_title">
            <span>Making a Web Site from Start to Finish</span>
        </div>


        <div id="primary_content">
            <div id="menu">

            </div>
            <div id="page_content">
                <h1>Design</h1>
                <p>We're not going to get into how to design a web site, technically or artistically.  (<a href="http://lifehacker.com/#!5753625/basics-of-photoshop-designing-a-website">We've sort of done that already</a>.)  You should have your site design figured out already, but there are a few things we do need to talk about before you start figuring out how to translate it into code.</p>

                <p>First, the most important thing to know is that your font choices are sort of restricted online.  While you can use the <a href="http://www.font-face.com/">@font-face</a> rule in CSS to externally load fonts, this isn't supported by older browsers.  You also may need rights to use certain typefaces with this tag.  That said, you <em>can</em> use @font-face to solve the problem of limited font choices on the web, but if you're not ready to jump into that world quite yet you should either use a web fonts service like <a href="http://www.webtype.com/">WebType</a> (which can be free depending on your use) or limit yourself to web-safe fonts.  Which fonts are web-safe?  Times New Roman and Arial are the most common options, but most operating systems come with several other built-in fonts that are considered web-safe.  These include fonts like Tahoma, Verdana, Lucida Grande, Gill Sans, Trebuchet MS, Courier New, and Georgia.  Do a search for web-safe fonts if you're looking for additional options.</p>

                <p>Second, you need to consider what is going to be an image and what isn't.  Nowadays you don't really need to use images for much more than complex graphics and photos as HTML and CSS can handle many of the complex things that we used to do with images.  Menus, for example, can be created very easily in CSS with an unordered list.  Generally you do not need text to be rendered as an image, but there may be some circumstances where you will need to do that (e.g. if the text is combined with a graphic).</p>

                <p>Finally, you need to consider which images are going to be displayed as actual images or as backgrounds for one of your DIVs.  How do you determine this?  If you have text that's going to go on top of an image (e.g. with a menu), then you have your answer: your image will be a background.  The reason this is important to know is because you need to export it unadorned with any text, images, or anything you're going to add later in the code.  Once you've got that figured out, head on to the next step ("Preparation") where we discuss preparing your layout for coding and exporting any necessary images.</p>
            </div>
        </div>
    </div>
    <div class="menu-wrap">
        <nav class="menu">
            <ul class="clearfix">

                <li><span class="color01">01</span> <a href="#">DESIGN</a></li>
                <li>
                      <span class="color02">02</span><a style="font-size 15px" href="#">PREPARATION<span class="arrow">&#9660;</span></a>

                    <ul class="sub-menu">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </li>
                <li><span class="color03">03</span> <a href="#">DEVELOPMENT</a></li>
                <li><span class="color04">04</span> <a href="#">DEPLOYMENT</a></li>
            </ul>
        </nav>
    </div>

</body>

【问题讨论】：

如果它在除一个之外的所有浏览器中看起来都不同，那么它在所有浏览器中看起来都不同。
我首先要让你的标记有效——你需要一个 doctype 声明。 <!DOCTYPE html /> 是最简单的。然后，阅读CSS resets 以及它们存在的原因。

标签： html css google-chrome cross-browser

【解决方案1】：

每个浏览器都有一个默认的 CSS。您必须在任何其他样式之前编写一个重置 css。

最常见的重置 css 是 Eric Meyer 的重置。

您也可以编写以下内容进行快速检查。

*{
   margin:0; 
   padding:0
 }

【讨论】：