除了谷歌瀏覽器，在所有瀏覽器上看起來不一樣的網站

所以我正在練習一些初學者的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>

來源

2016-10-22 Hevimetal

如果在所有瀏覽器中看起來不同，除了一個瀏覽器，它在所有瀏覽器中看起來都不一樣。 –

我首先讓你的標記有效 - 你需要一個文檔類型聲明。 '<！DOCTYPE html />'是最簡單的。然後，閱讀[CSS重置]（http://meyerweb.com/eric/tools/css/reset/）以及它們爲什麼存在。 –

每一個瀏覽器有一個默認的CSS。您將不得不在任何其他樣式之前編寫重置css。

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

您還可以編寫以下內容以進行快速檢查。

*{ 
    margin:0; 
    padding:0 
}

來源

2016-10-25 09:41:38 Swaraj89

除了谷歌瀏覽器，在所有瀏覽器上看起來不一樣的網站

回答

相關問題