带有 <a> 的内联 img 在 IE 中导致奇怪的问题答案

【问题标题】：Inline img with <a> causes weird issue in IE带有 <a> 的内联 img 在 IE 中导致奇怪的问题
【发布时间】：2010-10-29 21:32:06
【问题描述】：

文档类型：

<?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 只是添加了一个小内联框（大概是它期望文本的位置？），IE 用于访问链接的紫色边框。它出现在所有版本（6、7 和 8）中。

【问题讨论】：

这是 IE 显示的内容：i41.tinypic.com/9jf77p.jpg

标签： css internet-explorer inline image

【解决方案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。事实证明没有必要。

【讨论】：

@Chris：哈哈。你比我快 14 秒（见 cmets @Mitchel）。无论如何都接受这个，因为它是正确的答案:)
作为一般规则，不要标记内联元素，将它们保持在代码中的同一行以避免出现此问题和其他呈现问题。

【解决方案2】：

你需要在你的图片标签上设置border="0"，这样可以解决这个问题。当图片在链接中时，IE 会自动在其周围放置“链接”边框，以表明它是一个链接。

您也许还可以使用 CSS 将 img 标签的边框设置为 0

【讨论】：

设置border="0" 并不能解决这个问题。我已经在 CSS 中将边框设置为无。如果您实际上是指 0 或 0px，那么两者都不起作用。
@Daniel - 你能发布完整的 HTML 吗？这就是所需要的，我用我创建的一个快速示例进行了测试，没有任何问题。
@Mitchel：组成我缩进的换行符/制表符被 IE 视为纯文本。将 img 与链接标签放在同一行可以解决问题。
@Daniel - 这将是第二个猜测。很高兴你把它修好了。