Html頁面越來越奇怪與文檔

我寫了一個HTML頁面，與一些CSS在一個單獨的文件，它工作得很好。然後我意識到我應該爲我的html添加一個doctype聲明。我做到了，我的頁面完全搞砸了！我嘗試過所有類型的聲明，但都結束了！Html頁面越來越奇怪與文檔

這是我的HTML（目前只適用於Chrome的工作，如果沒有DOCTYPE）：

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <title>Luca Rood - Home</title> 
    </head> 
    <body background="images\background.jpg"> 
     <div id="header"> 
      <div id="header-back"></div> 
      <div id="top-spacing"></div> 
      <div id="content"> 
       <a href="index.html" title="Luca Rood - Home"> 
        <img id="image" src="images\logo.png" alt="Luca Rood"> 
       </a> 
      </div> 
     </div> 
    </body> 
</html>

這是我的CSS：

body { 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100% 100%; 
    margin: 0px 0px 0px 0px; 
    } 

#header { 
    position: relative; 
    height: 15%; 
    } 

#header-back { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: #000000; 
    opacity: 0.3; 
    z-index:1; 
    } 

#top-spacing { 
    height: 20%; 
    width: 100%; 
    } 

#content { 
    position: relative; 
    width: 80%; 
    height: 60%; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    z-index:2; 
    } 

#image { 
    height: 100%; 
    }

請幫助。

由於提前，

盧卡

來源

2013-03-21 Luca Rood

它是如何「搞砸」？ – Blender 2013-03-21 00:57:48

你「添加」了什麼'doctype'？你爲什麼不提交，而不是CSS？ – 2013-03-21 01:00:18

如果您選擇使用文檔類型（您應該），您必須遵循此文檔類型與瀏覽器一起使用。使用文檔類型，您可以告訴瀏覽器以某種方式運行。理論上所有的瀏覽器都應該表現相同，所以這或多或少是爲什麼你應該選擇一個文檔類型。所以你必須決定你想使用哪種文檔類型，然後改變你的css。如果您沒有選擇文檔類型，瀏覽器會以「怪癖」模式呈現頁面，並且您不希望發生這種情況（即使在您的頁面看起來最好的時刻）。 – pebbo 2013-03-21 01:01:29

您具有經典的比例高的問題。爲了解決這個問題，必須添加height:100%到body風格和具有height:100%以及在html元素添加樣式：

<style> 
    body{ 
     /*...*/ 
     height:100%; 
    } 
    html{ 
     height:100%; 
    } 
</style>

希望工程！

來源

2013-03-21 01:27:13 Markasoftware

非常感謝！你救了我的命！ – 2013-03-21 01:37:56

-1

試試這個上面< html>標籤

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

來源

2013-03-21 01:12:20 RonEskinder

變得更大，這正是問題所在。提問者明確表示，他/她嘗試了許多文檔類型，但他們沒有工作。 – Markasoftware 2013-03-21 01:15:14

Html頁面越來越奇怪與文檔

回答

相關問題