Question

我最近遇到一个特定问题的IE6很难，这里有一些我正在使用的HTML：

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
   <span style="display:block;width:100px;height:100px;">
      <img src="img.jpg" alt="My image" />
   </span>
</a>

使用Firefox等一切都很好，但直接点击IE6上的图像链接将无法正常工作（但链接上的任何其他地方都能正常工作）。

这是一个链接： http://www.daniel-rico.com/demos/ie/

有人有想法吗？

谢谢！

编辑：这在IE7上也不起作用：/

感谢您的回答！
我确实需要span标签。我应该多解释一下我想要做的事情;这是：
我需要一个可点击的盒子。在其中我需要：

具有固定大小的另一个包含动态图像（随机比率）的框
一些文字

Answer 1

我刚尝试过：

<span style="display:block;width:100px;height:100px;">   
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
      <img src="img.jpg" alt="Click your image now" />   
</a>
</span>

Answer 2

删除span标记，我认为你不需要它

<div style="width: 200px; height: 200px;">
    <a href="http://www.mylink.com" style="display: block; width: 100px; height: 100px;">
        <img src="img.jpg" alt="My image"/>
    </a>
</div>

如果您可以控制标记，则提取内联样式并使用

<div id="link">
    <a href="http://www.mylink.com">
        <img src="img.jpg" alt="My image"/>
    </a>
</div>

在文档的头部添加对外部样式表的引用

<head>
    <link rel="stylesheet" type"text/css" href="/Css/Style.css"/>
</head>

创建style.css并添加

div#link
{
    width: 200px;
    height: 200px;
}

div#link a
{
    display: block;
    width: 100px;
    height: 100px;
}

如果您在多个地方使用此风格的链接，请删除div上的ID并替换为

<div class="link">
    ...
</div>

将css中的选择器从＃更改为。

div.link
...

如果您只在IE6中遇到问题，您还可以使用条件注释来包含修复IE6特定问题的样式表

<head>
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="/Css/IE6.css"/>
<![endif]-->
</head>

Answer 3

奇怪的是，从跨度中删除宽度和高度属性允许您单击图像。

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
   <span style="display:block;">
      <img src="img.jpg" alt="My image" />
   </span>
</a>

当然这完全改变了布局，但它可能有助于解决IE漏洞。

另一种方法是使用带背景图像的div而不是img元素：

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
   <span style="display:block;width:100px;height:100px;">
      <div style="background-image:url(img.jpg);width:100px;height:100px;" title="My Image"><div>
   </span>
</a>

修改

背景图片解决方案不适用于您在评论中提到的随机比例图像。如果您只想在模型中实现布局：

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;padding-left:10px;"> <img src="img.jpg" alt="My image" /> <span style="padding-left:10px;">some text</span> </a>

Answer 4

我面临着在内容管理网站中构建导航的几乎相同的问题，但是由于需要在新窗口中打开某些导航项目这一事实而复杂化 - 这意味着使用javascript的解决方案变得有问题。

最终，我最终失去了＆lt; img ... /＆gt;标记并替换为＆lt; span ... /＆gt;并在跨度内设置背景图像（我可以使用div，但根据W3C，这是不好的形式）。

回过头来看你原来的例子，我会选择：

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
  <span style="display:block;width:100px;height:100px;">
    <span style="background-image=url(/img.jpg); width: 50px; height: 50px; display: block;">
      <span class="Hidden">My image</span>
    </span>
  </span>
</a>

Answer 5

使该区域可点击的最简单方法是将 position：relative 添加到您的链接样式;要保留IE6下的光标样式，可以将 cursor：hand 添加到span元素中。

a{ position: relative; display: block; width: 200px; height: 200px; }
span{ display: block; width: 100px; height: 100px; cursor: hand }

正如其他人所建议的那样，最好将IE6特定样式与条件注释块分开。

希望它有所帮助并祝你好运;）

Answer 6

我无法用CSS解决这个问题，我使用Javascript强制该区域可点击。令人失望，但是，它有效...

感谢大家的帮助！我很感激：）

Answer 7

尝试应用span css属性“zoom：0;”。它适用于我的情况。

IE6和IE7上的链接问题

7 个答案: