Doctype html問題

我在製作一個使用WYSIWYG編輯器的頁面。像大多數編輯一樣，它將所有內容放在「<p>」標籤中。Doctype html問題

當圖像具有100％的高度和寬度時，會給出格式問題。

以下HTML說明問題：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>No doc type</title> 
    <style type="text/css"> 
     /* css reset */ 
     * { 
      vertical-align: baseline; 
      font-family: inherit; 
      border: 0 none; 
      outline: 0; 
      padding: 0; 
      margin: 0; 
     } 

     html{ 
      font-size:100%; 
      height: 100%; 
     } 

     body{ 
      height: 100%; 
      font-size:62.5%; /* Reduce to 10px base */ 
      font-family:Arial, Helvetica, sans-serif; 
     } 
    </style> 
    </head> 
    <body style="margin:0;"> 
     <div> 
      <div style="width: 500px; height: 200px;"> 
       <div> 
        <div style="border:1px solid #000; padding: 0; width: 498px; height: 198px;"> 
         <p> 
          <img style="height: 100%; width: 100%;" src="http://www.google.com/logos/newyears10.gif"/>    
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

在Firefox中，p標籤實際上溢出DIV。這使得100％高度的圖像超過div的100％。

如果我刪除文檔類型，問題就解決了。我不太瞭解文檔類型，但我認爲我使用的是一個很好的（我使用它）。我認爲不使用一個是不好的。

任何人都知道如何讓這個顯示正確與文檔類型？

感謝

來源

2010-01-01 Christine Isl.

這篇文章應該被移動到文檔類型。 – 2010-01-01 07:47:30

我不知道，你可以用頁面做別的什麼，但調整段落高度將修正輸出。

div p{ height: 100%; }

來源

2010-01-01 07:39:49

正如Zurahn所寫，設置p的高度可以解決問題。

要理解這一點（和可能更好地爲您服務其他變化到達）： 1.圖像本身是311 X 137 2.因爲P沒有高度，圖像可以計算出寬度，但不邊界元素（p）的高度。 3.圖像因此變得與寬度一樣大，並且縮放圖像 - 創建219px的高度4.然後，p繼續拉伸以適合圖像。 5.給p一個高度讓圖像知道它應該達到100％的高度。然後它可以相應地縮放圖像。哎喲，那是寫得不是很好：

但現在q是 - 爲什麼不從它的祖先得到的高度 - 從它得到從祖先的寬度相同的方式？

而這個問題的答案與瀏覽器的高度方式有關，而瀏覽器的高度方式又與瀏覽器給出的溢出到高度的溢出之前的溢出寬度有關。

來源

2010-01-01 08:39:34 SamGoody

我想我和你有同樣的問題。 doctype html在頁面底部添加一個空格。這裏有幾個解決方案。您可以將其中一個屬性添加到圖像。像align="absmiddle"

style="display:block"
附加align屬性加浮動像style="float:left"

來源

2011-07-10 09:25:03 Elvis

Doctype html問題

回答

相關問題