небольшой разрыв в 1 пиксель в IE между двумя div - PullRequest
Новая
       0

небольшой разрыв в 1 пиксель в IE между двумя div

0 голосов
/ 11 сентября 2018

В приведенном ниже коде все отображается правильно в Chrome и Firefox.Элемент inner полностью растянут до outer.

В IE11 элемент inner не полностью растянут до контейнера.И есть разрывы в 1px, как на картинке. enter image description here

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    .outer {
      background-color: yellow;
      border: 1px solid black;
    }
    
    .inner {
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div>Outer</div>
    <div class="inner">Inner</div>
  </div>

</body>

</html>
  1. Почему это происходит?
  2. Как это исправить?

UPD1. Чтобы воспроизвести его, вы должны увеличить страницу.

1 Ответ

0 голосов
/ 05 июля 2019

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

Я думал, что смогу использовать box-shadow: 0 0 0 1px black; и удалить границу, но это масштабируетэлемент по-другому (и IE действительно плохо отображает тонкие тени, даст более неожиданные результаты, чем этот).Установка внешнего div на overflow: hidden; и использование зеленой тени-рамки на внутренней для заполнения промежутка тоже не сработало, box-shadow была обрезана.Даже flexbox и плавающие вещи не помогли, и это, похоже, не похоже на размер блока или высоту строки.

Единственное, что сработало, это замена границы на outline: 1px solid black;

Это также изменяет масштаб элемента, но его можно перенастроить, добавив отступ 1px + подход box-shadow, чтобы заполнить пробел: 

.outer {
    padding: 1px;
    background-color: yellow;
    outline: 1px solid black;
    outline-offset: -1px;
    overflow: hidden;
}

.inner {
    background-color: green;
    box-shadow: 0 2px 0 green;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...