Chrome 및 IE9에서 원하지 않는 이미지 테두리를 제거하는 방법은 무엇입니까?

Chrome 및 IE9에서 이미지 테두리 제거

웹용으로 디자인할 때 어려운 점 중 하나는 다양한 브라우저에서 일관된 시각적 표현을 보장하는 것입니다. 그러나 Chrome 및 IE9에서 이미지 주위에 원하지 않는 테두리가 나타나는 등의 특정 문제가 발생할 수 있습니다.

이 테두리를 제거하기 위해 개요: 없음 및 테두리: 없음과 같은 CSS 속성을 사용하려고 시도했을 수 있습니다. 그러나 아무 소용이 없습니다. 이는 Chrome에 border: none 스타일을 무시하는 알려진 버그가 있기 때문입니다.

이 문제를 해결하는 열쇠는 Chrome이 이미지에 크기가 없는 것으로 인식하도록 속이는 것입니다. 너비와 높이가 0px인 요소를 생성한 다음 적절한 패딩을 추가하여 원하는 이미지 크기를 보완하면 됩니다.

다음은 이 해결 방법을 실행하는 CSS 블록의 예입니다.

<code class="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;
}</code>

이 방법은 원하는 이미지 크기를 유지하면서 Chrome에서 윤곽선과 테두리를 효과적으로 제거합니다.

위 내용은 Chrome 및 IE9에서 원하지 않는 이미지 테두리를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!