Question

我正在为我的计算机上的Web服务器创建一个简单的登录页面。目前它看起来很好：

<html>
  <head>
    <title>Felix's computer</title>
    <style>body{background-color:red;font-family:Zapfino,cursive;text-align:center}img{height:50%}a{text-decoration:none;color:inherit}a:hover{color:blue}</style>
  </head>
  <body>
    <div>
      <h1>STOP - Felix's computer</h1>
      <h2>Here be dragons...</h2>
      <img src="dragon.png"><br>
      You may be looking for <a href="~frief17">Felix's page</a>?
    </div>
  </body>
</html>

Screenshot of page rendering properly

但是，只要我加入<!DOCTYPE html>，它就会突然显示：

Screenshot of page rendered with DOCTYPE

我知道这是因为'标准'模式和'怪癖'模式之间的区别，但我做错了什么？ CSS的哪一部分被不同地解释？

Answer 1

我认为高度是按其容器的百分比计算的，在这种情况下无用。

执行此操作的“正确”方法是将其设为div上的背景图像，然后使用background-size调整图像大小。

对于这个快速用例，您可能只想将图像标记的高度作为HTML属性拍打。

使用DTD无法正确呈现页面

1 个答案: