Как исправить маржу в 1 пиксель в Google Chrome? - PullRequest
Новая
       26

Как исправить маржу в 1 пиксель в Google Chrome?

5 голосов
/ 17 марта 2012

Вот пример http://jsbin.com/oqisuv/

CSS 

body {
    background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y;
}
.menu {
    width:989px;
    margin:auto;
    height:100px;
    background:#666666;
    line-height:100px;
    text-align:center;
    color:#fff;
}

HTML 

<body>
 <div class="menu">Hello</div>
</body>

Если вы посмотрите приведенный выше пример в Google Chrome, вы увидите .menu Похоже, есть margin-left:-1px или margin-right:1px.

В Firefox и IE он выглядит великолепно.Как мне это исправить?

Ответы [ 5 ]

3 голосов
/ 17 марта 2012 
@media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

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

body {   
 background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) 50% 0 repeat-y;   
} 

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 50.001% 0;
    }
}

http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/

1 голос
/ 05 июня 2013

Аналогично ответу Рудси, но этот, кажется, работает лучше: 

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 49.999% 0;
    }
}
0 голосов
/ 17 марта 2012

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

Попытки добиться идеального совпадения фона и центрированного блока по пикселям (особенно с помощью хаков для определенных браузеров) - тупиковый путь.

0 голосов
/ 17 марта 2012

Установите для поля тела значение 0 ... Попробуйте это css: 

body {
background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y;
margin: 0;
}
.menu {
width:990px;
height:100px;
margin: 0 auto;
background:#666666;
line-height:100px;
text-align:center;
color:#fff;
}
0 голосов
/ 17 марта 2012

Chrome и Firefox отображаются по-разному. Лучше, если вы хотите, чтобы результат был одинаковым во всех браузерах, всегда указывайте ширину в ДАЖЕ значениях не в ODD .Итак, напишите так: 

.menu {
    width:990px;
}

Проверьте это http://jsbin.com/oqisuv/2

ОБНОВЛЕНО Если вы хотите, чтобы он работал идеально в Chrome, вы можете использовать это: 

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .menu {
    width:990px;
 }

Проверьте это http://jsbin.com/oqisuv/5/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...