Как исправить ошибку субпикселя, как это делает Firefox?

Question

Если вы откроете эту страницу https://bug63336.bugzilla.mozilla.org/attachment.cgi?id=114574 и попытаетесь изменить размер окна вашего браузера, вы должны увидеть линии через черный ящик в любом браузере, кроме Firefox.Это связано с ошибкой субпикселя, и браузеры обрабатывают ее по-разному.Firefox округляет подпиксели таким образом, что вы не должны видеть никаких линий в этом черном ящике, но другие браузеры, а именно Opera, Safari, IE и Chrome, не решают проблему подпикселей.Итак, я хотел бы изучить способы (например, способы JavaScript), которые я мог бы округлять субпиксели, чтобы исправить ошибку субпикселя, как это делает Firefox.

РЕДАКТИРОВАТЬ:

Вот еще один пример, который вызывает эту проблему во всех браузерах, кроме Firefox: http://jsfiddle.net/4aMsx/2/

Answer 1

Вы не можете исправить это так, как это делает Fx, но вы можете попробовать с другой стороны.

Почему у вас есть пробелы?Из-за ошибок округления.Итак, мы должны убедиться, что не будет ошибок округления.Как бы это сделать?Сначала мы делим все пространство, которое у нас есть, а затем умножаем внутренний элемент, поэтому мы получим ситуацию, когда ошибка округления произойдет с родителем и всеми дочерними элементами.в этом контексте все будет в порядке.

Существует фиксированный пример из bugzilla: http://jsfiddle.net/2tmjw/

Я добавил оболочку со следующими стилями:

#wrapper4wrapper {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 8%;
    height: 8%;
}

И изменил оригинальную оболочку на

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000%;
    height: 1000%;
}

Вы можете увидеть это в действии, изменяя размеры окна или рамки скрипки.Вы можете заметить, что ширина обертки изменяется пошагово: именно туда и идут все ошибки округления.

Если вы хотите по-прежнему центрировать страницу, вы можете попробовать что-то вроде этого: http://jsfiddle.net/2tmjw/1/- но с абсолютным позиционированием довольно сложно расположить его идеально в центре.Но когда он не расположен абсолютно и вам нужно расположить его горизонтально, вы можете использовать display: inline-block с text-align: center или display: block с margin: auto.

Кроме того, соотношение сокращения родителей и детейРасширение должно быть выбрано из тех частей, которые вы хотите разделить на детей.Чем точнее вы хотите их видеть, тем меньше будет ширина родительского элемента, но шаги также будут расти.

Answer 2

Я не знаю, как FF решает эту проблему, но добавление стиля CSS border: 1px solid black; в #wrapper div правило стиля CSS позволяет обойти эту проблему во всех браузерах: Chrome, IE7, Opera, Safari.

#wrapper div {
  position: absolute;
  background: black;
  border: 1px solid black;
  width: 20%;
  height: 20%;
}

Answer 3

Я не слишком уверен, поможет ли это.Но стоит попробовать.взгляните на этот веб-сайт. CSS Browser Selector .Они используют как CSS, так и javascript для настройки браузеров на конкретные проблемы.