Элемент не переносится должным образом, отображается в окне изменения размера и прокручивается вправо. - PullRequest
Новая
       23

Элемент не переносится должным образом, отображается в окне изменения размера и прокручивается вправо.

0 голосов
/ 31 мая 2011

Поиграв с самой простой настройкой HTML, я обнаружил, что обертка верхнего тега <html> не работает должным образом в КАЖДОМ браузере.

У меня есть элемент <html> сцвет фона желтый.Затем элемент <body> шириной 1000 пикселей, высотой 100 пикселей и красным цветом фона.

При просмотре страницы и изменении размера области просмотра (чтобы горизонтальная полоса прокрутки стала видимой) полностью прокрутите вправо.и посмотрите метрики в вашем любимом инструменте для веб-разработчиков.

Тег body корректно отображается с шириной 1000 пикселей, но затем наведите указатель мыши на элемент HTML, который будет обрезан точно в соответствии с разрешением области просмотра.Другими словами, элемент <html> не переносится должным образом.Даже если цвет фона тега <html> правильно отображается на всей странице?

Вы можете подумать.Почему это важно, цвет отображается правильно так.Зачем беспокоиться?

Проблема становится понятной и на этом сайте!Прокрутите вниз до нижней части этой страницы, измените размер окна браузера и затем прокрутите вправо.Посмотрите, что происходит с фоном нижнего колонтитула img.

При работе с фоновыми изображениями / цветом это действительно раздражает.

Я нашел решение в Интернете, чтобы решить эту проблему, ноэто не элегантно. 

/* Wrap Fix! */
/*set min-width for ie*/
min-width: 1000px; 
/*force horizontal scroll for widths <1000*/ 
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );

Мои вопросы:

Это правильное поведение браузеров?Как это можно решить по-другому?

Для получения дополнительной информации, обсуждения и демонстрации проверьте этот форум 

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Weird html wrap..</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    html {
      background-color: yellow;
    }
    
    body {
      background-color: red;
      height: 100px;
      width: 1000px;
    }
  </style>
</head>

<body>
</body>

</html>

1 Ответ

0 голосов
/ 31 мая 2011

То же самое можно сказать о любом элементе блока, которым является элемент HTML. Если какой-либо из его дочерних элементов шире, чем он, они «просачиваются» за его пределы (см .: http://jsbin.com/edoza5).. Вы предполагаете, что HTML является особенным, когда он просто является просто другим элементом блока.

Это правда, что существуют несоответствия между тем, как браузеры обрабатывают настройку ширины элемента body, что является одной из причин, по которой вмещающая оболочка является обычным местом. Это и полезно иметь два 100% корневых элемента для игры.

...