Фоновый центр с хромом (ошибка) - PullRequest
Новая
       35

Фоновый центр с хромом (ошибка)

7 голосов
/ 23 июня 2011

У меня фоновое изображение по центру, которое Chrome отображает со смещением в один пиксель.

CSS 

#container { 
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    width: 100%
}
#header {
    width: 986px;
    margin: 100px auto 0 auto;
}

HTML 

<html>
<body>
    <div id="container">
        <div id="header">centered content</div>
    </div>
</body>
</html>

Я полагаю, это связано с тем, как разные браузеры обрабатывают center -или 50% - свойство background в CSS:

enter image description here

Есть ли известный ( простой ) взломать или альтернативный способ исправить это?Фоновый контейнер имеет ширину 100%.

Ответы [ 7 ]

5 голосов
/ 11 июля 2011

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

Если нашли это решение здесь - http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/

3 голосов
/ 06 июля 2011

Для меня это помогло: 

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

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

1 голос
/ 24 июля 2012

Если вы сделаете ширину фонового изображения нечетным числом (987px), позиционирование будет одинаковым во всех браузерах. Это кажется нелогичным, но это, кажется, всегда решает проблему без CSS-хаков.

0 голосов
/ 26 февраля 2013

Я использовал следующий бит CSS, чтобы исправить проблему с webkit.Если JS не включен, он работает в предположении, что браузер, вероятно, будет полноэкранным, поэтому ширина области просмотра на webkit будет нечетным числом

CSS 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    html {
        margin-left: 1px;
    }
    html.evenWidth {
        margin-left: 0px;
    }
}

JavaScript (jquery) 

$(document).ready(function {
var oWindow = $(window),
htmlEl = $('html');

function window_width() {
    if(oWindow.width() % 2 == 0) {
        htmlEl.addClass('evenWidth');
    } else {
        htmlEl.removeClass('evenWidth');
    }
}

$(document).ready(function(){
    window_width();
    $(window).resize(window_width);
});
0 голосов
/ 23 июня 2011

Полагаю, фоновое изображение также имеет ширину 986 пикселей?Тогда этот эффект также должен быть виден с левой стороны, хотя и развернут.

Я предлагаю удалить фоновое изображение из контейнера и добавить его в заголовок: 

#container {
    width: 100%;
}
#header {
    width: 986px;
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    margin: 100px auto 0 auto;
}
0 голосов
/ 23 июня 2011

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

0 голосов
/ 23 июня 2011

Является ли изображение на самом деле 986px? Самый простой способ, который я нашел, чтобы исправить это, это убедиться, что ширина изображения является четным числом.

Другая вещь, которую вы можете сделать, это добавить буфер 2px (чтобы сохранить ширину четным числом) в фоновом изображении, чтобы учесть этот сдвиг. Оно не должно сдвигать ваше изображение при просмотре в браузере, если вы добавляете пиксель к каждой стороне, чтобы все было ровно.

...