문제

DocType :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML :

<a href="http://www.somelink.com">
    <img src="images/someimage.jpg" alt="sometag" />
</a>

CSS :

div.something img {
    display:            inline;
    border:         none;
}

Firefox는 그들에게 괜찮은 것을 보여줍니다. 즉, IE가 방문한 링크에 사용하는 자주색 테두리가있는 약간의 상감 상자 (아마도 텍스트가 예상되는 위치)를 추가합니다. 모든 버전 (6, 7 및 8)에서 발생합니다.

도움이 되었습니까?

해결책

다음 HTML을 사용하여 문제를 재현 할 수있었습니다.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        div.something img 
        {
            display: inline;
            border: none;
        }
        div.something a
        {
            border: 0;
        }
    </style>
</head>
<body>
    <div class="something">
        <a href="http://www.somelink.com">
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
        <a href="http://www.somelink.com">
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
        <a href="http://www.somelink.com">
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
    </div>
</body>
</html>

이것의 문제점은 오프닝 "A"태그의 끝과 "IMG"태그의 시작 사이의 공백이 링크의 일부로 간주된다는 것입니다.

대체 :

<a href="http://www.somelink.com"><img src="images/someimage.jpg" alt="sometag" /></a>

IE8의 문제를 해결했습니다.

편집하다: CSS를 제거했습니다. 필요하지 않은 것으로 판명되었습니다.

다른 팁

설정해야합니다 border="0" 이미지 태그에서 문제가 해결됩니다. 즉 이미지가 링크 내부에있을 때 링크임을 보여주기 위해 "링크"테두리를 자동으로 넣습니다.

CSS를 사용하여 IMG 태그의 경우 테두리를 0으로 설정할 수도 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top