CSS Background Image center - это не то же самое, что margin: 0 auto с полосами прокрутки

Question

Посмотрите на http://jsfiddle.net/7zb6P/1/

И желтый прямоугольник, и фоновое изображение расположены по центру прокрутки div, хотя их центр немного отличается.Похоже, это происходит из-за того, что фон центрирован по всей области (включая полосу прокрутки), но div центрирован по области содержимого (не включая полосу прокрутки) - посмотрите правильно по центру без полосы прокрутки http://jsfiddle.net/7zb6P/2/

Интересно, что IE7 отображает его «правильно», но IE8 + и другие браузеры отображают его, как описано выше.

У меня была игра с background-origin (и -webkit-background-origin), но ни один изсвойства, кажется, имеют какой-либо эффект.

Есть идеи, как решить эту проблему?

РЕДАКТИРОВАТЬ: Дополнительная информация: Связанная скрипка является лишь минимальным примером проблемы, моя настоящая проблема с целымсайты, где центрировано (с margin:0 auto) и центрировано фоновое изображение (с использованием background-position: center top).Решение должно работать на большом количестве сайтов, на которых я не могу изменить HTML, поэтому оно должно быть решением на основе CSS (или, возможно, на основе Javascript).Спасибо.

Answer 1

Проблема связана с вашим фоновым изображением. Вы пытаетесь центрировать изображение, которое (для целей CSS) не имеет центра.

Ширина изображения составляет 321 пиксель. Это означает, что центр изображения составляет 161,5 пикселей. Поскольку браузер не может отобразить эту позицию, он получает смещение в 1 пиксель.