Почему элементы выглядят по-разному при применении переходного типа документа XHTML? - PullRequest
Новая
       9

Почему элементы выглядят по-разному при применении переходного типа документа XHTML?

1 голос
/ 09 августа 2010

У меня есть простая страница с двумя элементами: 

<html>
  <body>
    <input type="text" style="height: 18px; width: 120px" /><br/>
    <select style="height: 18px; width: 120px">
      <option>test</option>
    </select>
  </body>
</html>

В попытке сделать его совместимым с w3c и отображать его в разных браузерах я добавил элемент DOCTYPE и пространство имен XML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <input type="text" style="height: 18px; width: 120px" /><br/>
    <select style="height: 18px; width: 120px">
      <option>test</option>
    </select>
  </body>
</html>

CSS - это просто попытка сделать ширину и высоту как текстового поля, так и поля выбора одинаковыми.

Однако по какой-то причине 2-я страница больше не учитывает высоту иCSS-атрибуты width, которые я установил в теге input.Текстовое поле примерно на 4 пикселя выше в каждом браузере (IE, Firefox, Chrome) и на 4-6 пикселей шире в каждом браузере.

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

Если возможно, кто-нибудь может объяснить мне это поведение?

Любая помощь будет высоко ценится.

Спасибо,

BJ

Ответы [ 2 ]

1 голос
/ 09 августа 2010

Ваш код не совместим с XHTML, вы пропускаете элемент head: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <!-- head goes here -->
  <head>
   <title>My page title</title>
  </head>

  <body>
    <input type="text" style="height: 18px; width: 120px" /><br/>
    <select style="height: 18px; width: 120px">
      <option>test</option>
    </select>
  </body>
</html>

Если вы хотите сделать входные данные одинаковыми, вы должны оформить их следующим образом: 

<style type="text/css">
input[type="text"], select{
    width: 120px;
    height: 18px;
    padding: 0;
    margin: 0;
    border:1px solid grey;
}
</style>

Это хороший справочник для написания правильного XHTML http://www.w3schools.com/xhtml/xhtml_intro.asp

Статья о хороших ресурсах и хорошее объяснение, почему вышеупомянутый сайт не является хорошей справкой: W3Fools .

0 голосов
/ 09 августа 2010

Не указав тип документа, можно перевести многие браузеры в режим совместимости.Без фактического расследования я бы предположил, что страница без doctype отображается неправильно.Попробуйте указать тип документа (html4 или что-то еще) в первом примере и посмотрите, что произойдет.

Редактировать: Основная причина несоответствия в рендеринге связана с режимами совместимости.Прежде чем пытаться найти различия, убедитесь, что ваша разметка действительна (http://validator.w3.org/), как и ваши таблицы стилей (http://jigsaw.w3.org/css-validator/).) Если ваша разметка не сообщает браузеру, как ее анализировать, или содержит ошибкибраузер, вероятно, сделает ошибки при отображении страницы.

В вашем примере, вероятно, он работает в режиме причуд на разметке no-doctype, вызывая ошибки таблицы стилей.

...