Страница не отображается должным образом с DTD

Question

Страница не отображается должным образом с DTD

0

Я делаю простую целевую страницу для веб-сервера на своем компьютере. На данный момент это выглядит хорошо:

<html>
  <head>
    <title>Felix 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 computer</h1>
      <h2>Here be dragons...</h2>
      <img src="dragon.png"><br>
      You may be looking for <a href="~frief17">Felix page</a>?
    </div>
  </body>
</html>

Однако, как только я включаю <!DOCTYPE html>, он выглядит так:

Я знаю, что это из-за разницы между режимом "стандарты" и "причудами", но что я делаю неправильно? Какую часть CSS интерпретируют по-разному?

felixphew 17 апр. 2014, в 01:14

Источник

Теги:

html

css

doctype

1 ответ

Ещё вопросы

swider · Answer 1 · 2014-04-16T23-20-00.000Z

Я думаю, что высота вычисляется как процент от ее контейнера, что бесполезно в этом случае.

"Правильным" способом сделать это было бы сделать это фоновым изображением на div, и вы измените размер изображения с background-size.

Для этого случая быстрого использования вы, вероятно, просто хотите пощекотать высоту вашего тега изображения как атрибут HTML.