Инструменты разработчика Chrome не выделяют все тело? - PullRequest
0 голосов
/ 31 декабря 2018

Мне интересно, является ли это ошибкой или (более вероятно) недоразумением при использовании dev tools / CSS.Я играл с JSFiddle в следующем стиле:

div.notrelative {
    height: 100px;
    width: 100px;
    background: #eaf;
    margin: 50px;
    font-size: 9px;
    position:relative;
    font-family: Arial;
}
body {
    margin:30px;
}
div.absolute {
    height: 20px;
    width: 20px;
    position: absolute;
    background: #eea;
    margin-bottom: 10px;
    top: 0;
    left: 0;

, и я смотрел на выделенные области в инструментах разработки как на JSFiddle, так и на локальной копии, и заметилчто-то странное.Chrome выделял только часть тела синим цветом (после верхнего поля элемента child , но, как ни странно, без левого поля), несмотря на то, что тело занимало всю страницу (как видно по серому цвету фона)).Тем не менее, простое создание чего-то простого, например, границы вокруг тела, кажется, полностью решает проблему выделения.Есть ли причина, по которой Chrome выделяется по-разному в двух случаях?enter image description here

enter image description here

1 Ответ

0 голосов
/ 31 декабря 2018

Сужение полей заставляет div.notrelative расширять свои поля за пределы <body> по вертикали и нажимать <html>, чтобы быть больше <body>.Таким образом, при выделении <body> область за пределами <body>, но внутри <html> не выделяется.Эта невыделенная область представляет поля div.notrelative.Добавление границ предотвращает сворачивание полей в случае родительского и первого / последнего дочернего элемента.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...