文档类型:
<?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)中。
最佳答案
使用以下 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。结果证明没有必要。
关于css - 带有 <a> 的内联 img 在 IE 中导致奇怪的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/926180/