'border: none;'을 사용해도 Chrome에서 내 이미지에 여전히 테두리가 나타나는 이유는 무엇입니까?

Chrome에서 이미지 테두리 제거

Chrome 및 IE9에서 이미지 작업을 할 때 자주 발생하는 문제 중 하나는 지속적으로 얇은 테두리가 나타나는 것입니다. 'outline: none;'을 지정했음에도 불구하고 이미지 주위에; 그리고 '테두리: 없음;' CSS에서. 이 문제를 해결하려면 다음 접근 방식을 고려하세요.

Chrome 버그 우회

Chrome에는 "경계: 없음"을 무시하는 알려진 버그가 있습니다. 스타일. 이 문제를 해결하려면 다음 CSS id 블록을 사용하여 원하는 패딩으로 투명한 영역을 생성하여 Chrome이 이미지가 없다고 생각하도록 효과적으로 속입니다.

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

스타일 중복

또 다른 해결책은 CSS와 jQuery의 border=0 속성을 통해 테두리 및 윤곽선 제거 스타일을 복제하는 것입니다. 이러한 중복 접근 방식은 때때로 브라우저가 스타일을 올바르게 적용하도록 강제할 수 있습니다.

<code class="css">img, a img {
    outline: none;
    border: none;
}</code>

<code class="js">$(document).ready(function(){
    $('img').attr('border', '0');
});</code>

추가 고려 사항

이미지 파일의 크기가 CSS에서 지정된 너비와 높이. 불일치가 있는 경우 브라우저는 보상을 위해 테두리를 추가할 수 있습니다.

이러한 솔루션을 구현하면 Chrome 및 IE9에서 원치 않는 이미지 테두리를 효과적으로 제거하여 웹 페이지에 일관되고 시각적으로 보기 좋은 모양을 제공할 수 있습니다. .

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