-
06-09-2019 - |
문제
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으로 설정할 수도 있습니다.
제휴하지 않습니다 StackOverflow