CSS와 jQuery를 사용해도 Chrome과 IE9에서 내 이미지에 여전히 테두리가 나타나는 이유는 무엇입니까?

Chrome 및 IE9에서 이미지 테두리 문제 수정

이 스레드는 Chrome 및 Internet Explorer 9에서 이미지 주위에 눈에 띄는 테두리가 나타나는 문제를 해결합니다. CSS 및 jQuery를 사용하여 이를 제거하려는 시도에도 불구하고.

제공된 CSS 코드:

<code class="css">outline: none;
border: none;</code>

윤곽선과 테두리를 모두 비활성화하는 반면 border=0 속성은 모든 이미지 태그에 추가됩니다. 그러나 테두리는 여전히 지속됩니다.

이 문제의 근본 원인은 border:none을 무시하는 Chrome의 버그입니다. 스타일. 해결 방법으로 Chrome에서 표시할 콘텐츠가 없다고 믿도록 속여야 합니다. 다음은 CSS ID 블록을 사용하는 솔루션입니다.

<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>

이는 이미지 크기를 0으로 설정하지만 실제 이미지 크기의 패딩을 포함합니다. Chrome은 버튼의 배경 이미지를 위한 공간을 남겨두면서 이미지가 없다고 생각하도록 효과적으로 속입니다. 이 솔루션은 Chrome과 기타 브라우저 모두에서 원치 않는 윤곽선과 테두리를 제거합니다.

위 내용은 CSS와 jQuery를 사용해도 Chrome과 IE9에서 내 이미지에 여전히 테두리가 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!