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

Вот пример http://jsbin.com/oqisuv/Как исправить 1px-маржу в Google Chrome?

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 это отлично. Как это исправить?

источник

2012-03-17 Unknown Error

вот фотография, выше светлячок, ниже хром. я не вижу никакой разницы. http://i.imgur.com/OSu9D.png –

@AndreiS вот мой Chrome .. http://i.imgur.com/W1Mhj.png могу ли я узнать, какую версию ОС и Chrome вы используете ? –

windows 7, chrome 17 –

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

html { 
    margin-left: 1px; 
} 

}

Background center with chrome (bug)

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/

источник

2012-03-17 18:22:38 huhu

Первый фрагмент создает пространство между полноразмерным фоном и полноразмерными элементами. Второй фрагмент работает только для ширины окна, превышающего ~ 1660 пикселей. Мне действительно нужно выровнять большое полупрозрачное фоновое изображение элемента A с меньшим элементом B, который имеет полупрозрачный цвет фона.Если бы эти два были непрозрачными на 100%, я бы немного увеличил ширину меньшего размера, чтобы он покрывал любые «неуместные» пиксели. Plz plz plz =) – XedinUnknown

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

.menu { 
    width:990px; 
}

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

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

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

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

источник

2012-03-17 17:49:13 sandeep

Он будет исправлен на webkit, а не на IE или Firefox. –

проверить мой пример, это работает во всех браузерах. – sandeep

В FF или IE вы увидите «margin-left: -1px'. Тень ушла влево. –

Установите край тела в 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; 
}

источник

2012-03-17 18:01:24 doitliketyler

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

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

источник

2012-03-17 18:44:56

Подобный ответ rudsy, но это, кажется, работает лучше:

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

источник

2013-06-05 18:03:58

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

ответ

Смежные вопросы