Неожиданное поле в 1 пиксель в браузере Edge

У меня неожиданное поле в 1 пиксель под div, находящимся в фиксированном контейнере. Эта проблема возникает только в Edge (возможно, и в IE). После некоторого тестирования я смог воспроизвести ошибку на чистом примере.

Это изображение, которое вы можете воспроизвести, запустив приведенный ниже фрагмент, состоит из 3 квадратных блоков внутри фиксированного блока. Fire Fox

введите здесь описание изображения

В Edge вы можете «исправить» эту проблему, либо отключив свойство top: 50% в контейнере div, либо отключив border-*-right-radius: 6px в div внутри него. Естественно, это не исправление, потому что мне нужны оба этих свойства для эффективной реализации этого дизайна.

Как я могу это исправить? Я попытался добавить границы того же цвета, что и фон, но фон не непрозрачен.

Редактировать: если вы не видите его сразу в IE/Edge, попробуйте выбрать контейнер div и медленно увеличивать значение свойства top. В IE11 изменение его с 5% до 6% уже снова сделало проблему очевидной.

.box {
  background-color: rgba(0,0,0,0.15);
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-right: 1px solid rgba(0,0,0,0.2);
}
.box:hover {
  background-color: rgba(50,50,100,0.15);
}
.box:first-child {
  border-top-right-radius: 6px;
  border-top: 1px solid rgba(0,0,0,0.2);
}
.box:last-child {
  border-bottom-right-radius: 6px;
  border-bottom:1px solid rgba(0,0,0,0.2);
}

.main {
  width: 70px;
  position: fixed;
  left: 0;
  top: 5%;
}
<div class="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>


css microsoft-edge
person ecc    schedule 15.09.2015    source источник
comment
Не воспроизводится в IE11; похоже, что это только для Edge.   -  person TylerH    schedule 15.09.2015
comment
В FF тоже не воспроизводится. Однако вы можете использовать элемент «до» или «после», например .box:after{}, и разместить что-то абсолютное поверх этого контейнера.   -  person RooWM    schedule 15.09.2015
comment
Спасибо за тестирование, но я только что проверил это сам, и в IE он тоже есть, но немного менее заметен. Проверьте мое обновление.   -  person ecc    schedule 15.09.2015
comment
Firefox и Chrome в порядке, как бы я ни пытался их сломать.   -  person ecc    schedule 15.09.2015
comment
Вы пытались удалить: «line-height: 70px;»?   -  person Danny Fardy Jhonston Bermúdez    schedule 15.09.2015
comment
Я воспроизвел это в IE 11. Это из-за радиуса границы. Удалите его, и он будет исправлен. jsfiddle.net/gtf0fa8n   -  person IonDen    schedule 15.09.2015
comment
Я уже упоминал об этом в своем вопросе. Я не могу просто удалить конструктивную особенность. Это не решает эту проблему, просто скрывает ее до следующего раза.   -  person ecc    schedule 15.09.2015
comment
Похоже на проблему с рендерингом, поэтому сомневаюсь, что вы сможете это исправить. Проверьте это и измените размер панели дисплея, вы увидите, как она мерцает между двумя краями. Также иногда он вообще не показывает линию (по желанию), и, честно говоря, разве мы не ожидаем, что Edge будет делать это? как в, не работает хорошо   -  person musefan    schedule 15.09.2015
comment
Да, это то, что мы ожидаем. Я тоже заметил это мерцание. Проблема в том, что если вы переместите или измените размер окна, оно, вероятно, снова защелкнет один из двух краев. Тогда попробую другой подход.   -  person ecc    schedule 15.09.2015

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте использовать границу родительского элемента div: http://jsfiddle.net/gtf0fa8n/1/

Радиус границы на родительском элементе не тормозит рендеринг внутренних div в IE

.main {
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    overflow: hidden;
}

.box {
    background-color: rgba(0, 0, 0, 0.3);
    height: 70px;
    line-height: 70px;
    text-align: center;
}
.box:hover {
    background-color: rgba(50,50,100,0.15);
}
person IonDen    schedule 15.09.2015
comment
Можете ли вы вставить код вместо скрипки, пожалуйста? Лучше для сайта - person ecc; 15.09.2015
comment
Тогда посмотрите, как эффект наведения ломает его! Я думаю, что реальное решение - дождаться обновленной версии Edge... примерно через 5 лет. - person musefan; 15.09.2015
comment
@musefan Edge постоянно обновляется, как Chrome и Firefox. - person TylerH; 15.09.2015
comment
Людей @TylerH легко обмануть, но у них большие номера версий. MS просто следует лучшим методам управления версиями. - person ecc; 16.09.2015
comment
Из соображений дизайна я не буду применять радиус границы к контейнеру, а вместо этого применю прозрачный фон. который отлично работает. - person ecc; 16.09.2015
comment
@ecc переход с Microsoft Internet Explorer на Microsoft Edge — это больше, чем большое изменение номера версии. Это совершенно новый браузер, новое имя, новый движок рендеринга, новая дорожная карта и философия разработки. Важно, чтобы люди понимали это, чтобы у них не осталось устаревших и вредных предубеждений в отношении Эджа. - person TylerH; 16.09.2015

arrow_upward
2
arrow_downward

Просто дайте boxshadow 1px с таким же цветом внизу.

box-shadow: #2a2e37 0px 1px 0px;
person Ammar    schedule 24.03.2016
comment
Столкнулся с этой проблемой с моим нижним колонтитулом. Много пробовал и ничего не получалось. Спасибо за этот блестящий обходной путь. - person J. Sadi; 20.08.2019