Question

文档类型：

<?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）。

Answer 1

使用以下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。原来没有必要。

Answer 2

您需要在图片代码上设置border="0"，以解决问题。 IE当图像在链接中时，会自动在其周围放置“链接”边框，以显示它是一个链接。

您也可以使用CSS将边框设置为0以用于img标记

内嵌img <a> causes weird issue in IE</a>

2 个答案: