Базовый HTML Div неправильно отображается при увеличении (кросс-браузер) - PullRequest
Новая
       13

Базовый HTML Div неправильно отображается при увеличении (кросс-браузер)

1 голос
/ 08 апреля 2020

Я столкнулся с проблемой, связанной с масштабированием, с довольно простым HTML, который воспроизводит кросс-браузер - по крайней мере в Chrome, Firefox 74 и IE11. У меня в основном просто иерархия из 3 делений, со средним делением, сконфигурированным для рисования границы размером в 1 пиксель, а самые внутренние и внешние деления сконфигурированы с разными цветами фона. 

<html><body>

<div style="left: 0px; top: 0px; width: 320px; height: 262px; background-color: red; overflow: visible;" >
    <div style="border:1px solid grey;left: 0px; top: 0px; width: 318px; height: 260px; overflow: hidden;">
        <div style="left: 0px; top: 0px; width: 318px; height: 260px; overflow: hidden; background-color: white;">
        </div>
    </div>
</div>

</body>
</html>

Проблема в том, что при указанном c (но не всем) zoom rat ios, самый внешний div (в этом примере с красным фоном) "кровоточит" до и видна как красная линия под самым внутренним делителем (и рядом с нижней границей среднего деления). Обычно я просто объясняю такую ​​проблему до ошибки браузера - за исключением того, что это кросс-браузер. Итак, вопрос в том, делаю ли я что-то не так? Т.е. это HTML не верно?

Прикреплены скриншоты (включая увеличенные снимки) в Chrome (крупным планом) (125%), Firefox (крупным планом) (125%) и IE11 (425%). Обратите внимание, что странно, красная линия находится на противоположных сторонах границы в Chrome против Firefox. Также обратите внимание, что в IE11, при увеличении 425%, вы можете видеть, что красная линия имеет толщину около 1px, около 1/4 границы при этом коэффициенте масштабирования, что указывает на то, что это, возможно, проблема рендеринга субпикселя.

Если вы установите ширину и высоту двух внутренних элементов div на 100%, это избавит вас от красной линии, но это не является исправлением, поскольку размер блока по умолчанию является "content-box" по умолчанию, это фактически увеличивает элемент div на 2 пикселя по обеим осям. Если я применяю «box-sizing: border-box» к среднему div, то 100% -ное определение размера не увеличивает его относительно оригинала, но красная линия возвращается.

Есть ли общий браузер? spe c для рендеринга таких HTML, что, возможно, может объяснить, почему эта проблема масштабирования является кросс-браузерной? Критически, что предлагается HTML, чтобы избежать этой проблемы?

...