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问题

回答

相关问题