Chrome/IE9에서 눈에 띄지 않는 이미지 테두리 제거

Chrome 또는 IE9에서 이미지를 표시할 때 설정에도 불구하고 얇은 테두리가 계속 나타날 수 있습니다. CSS의 "개요: 없음" 및 "테두리: 없음". 이 문제는 "border: none"을 재정의하는 독특한 Chrome 동작으로 인해 발생합니다.

이 문제를 해결하려면 이미지 너비와 높이를 0px로 설정하고 해당 픽셀 값으로 패딩하는 영리한 기술을 사용할 수 있습니다. 원하는 버튼 크기로 다음 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에서 보기 흉한 테두리 없이 이미지를 표시할 수 있게 해줍니다.