Удаление неуловимой границы изображения в Chrome/IE9

При отображении изображений в Chrome или IE9 вы можете столкнуться с постоянной тонкой рамкой, несмотря на настройку «Контур: нет» и «Граница: нет» в CSS. Эта проблема возникает из-за своеобразного поведения Chrome, которое переопределяет «border: none».

Чтобы противодействовать этому, вы можете использовать хитрый метод, который включает установку ширины и высоты изображения на 0 пикселей, дополняя его соответствующими значениями пикселей. до нужного размера кнопки. Рассмотрим следующий пример CSS:

#dlbutn {
    display: block;
    width: 0px;
    height: 0px;
    outline: none;
    padding: 43px 51px 43px 51px;
    margin: 0 auto 5px auto;
    background-image: url(/images/download-button-102x86.png);
    background-repeat: no-repeat;
}

Заставляя Chrome поверить в то, что в этих размерах нет видимого контента, вы фактически устраняете границу. Этот метод обеспечивает совместимость с различными браузерами и позволяет отображать изображения без неприглядных границ в Chrome.