Как убрать отступы в блоке в Опере и Хроме?

Question

[Владислав]

Проблема: Непонятные отступы в блоке:

Такой косяк только в Опере и Хроме.

Див фиксированной ширины с зелёным фоном. В диве картинка в 100% дива. Почему-то в Мозилле и IE работает нормально, а в Хроме и Опере почему-то какой-то отступ по краям, через который просматривается зелёный фон.
display:block и border:none у картинки не помогает.

Код такой:

<div class="preloader-flower-bg-wrapper"> 
  <img class="preloader-flower-bg" src="/styles/default/css/custom/images/flower_frame.png"> 
</div>

.preloader-flower-bg-wrapper {
width: 513px;
height: auto;
background-color: #1b9417;
}
.preloader-flower-bg {
width: 100%;
height: auto;
}

jsfiddle.net/Buggy/7d3nqp09/3/#&togetherjs=0QwsSoP98t

Comments

[Максим Тимофеев]

оформите код нормально

[Анатолий]

Лучше на jsfiddle залейте.

[Владислав]

Не знаю, как на jsfiddle файл залить. Верстаю локально.

Answer 1

[Paul Osmachko]

Картинка это строчный элемент. Его нужно сделать блочным тогда отступы уйдут.

.preloader-flower-bg {
    display: block;
}

Comments

[Владислав]

Я писал в вопросе:

display:block и border:none у картинки не помогает.

[Paul Osmachko]

а ты обнулял css свойства у браузера?
Cамый короткий пример:

*{
    border: none;
    padding: 0;
    magrin: 0;
    outline: 0;
}

[Владислав]

Пробовал, не помогает.

Answer 2

[AngReload]

У меня ваша картинка не показывается, так как вы сделали кривую ссылку на яндекс диск.
Но подозреваю, что это может быть артефакт интерполяции изображения. Попробуйте добавить для картинки стиль image-rendering: pixelated;. Если границы исчезнут, то проблема в этом.

Comments

[Владислав]

Я не знаю, как на jsfiddle заливать картинки.

Попробуйте добавить для картинки стиль image-rendering: pixelated;.

Не помогло, только ухудшило качество картинки.