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

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

EDIT:

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

Ответ 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.

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

Ответ 2

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

Ответ 3

Я не знаю, как 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%;
}