IE6和IE7的链接问题。-LinkproblemonIE6andIE7

2  

i just tried it on:

我刚试过

1  

Remove the span tag, I don't think you need it

移除span标签，我认为你不需要它。

If you have control over the markup then extract the inline styles and use

如果您控制了标记，则提取内联样式和使用。

In the head of the document add a reference to an external stylesheet

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

Create style.css and add

创造风格。css和添加

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

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

If you are using this style of link in multiple places remove the id on the div and replace with

如果您在多个地方使用这种样式的链接，请删除div上的id并使用替换

    ...

And change the selector in the css from # to .

并将css中的选择器从#改为#。

div.link
...

If you are having problems only in IE6 you can also use conditional comments to include a stylesheet that fixes IE6 specific problems

如果您只在IE6中遇到问题，您还可以使用有条件的注释来包含一个样式表来修复IE6的具体问题。

1  

Oddly enough, removing the width and height properties from the span allows you to click on the image.

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

Of course this completely changes the layout but it might help solve the IE bug.

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

An alternate method would be to use a div with a background-image instead of an img element:

另一种方法是使用具有背景图像的div而不是img元素:

Edit:

编辑:

The background-image solution doesn't work for random ratio image you mentioned in your comment. If you just want to achieve the layout in the mockup:

背景图像解决方案对您在评论中提到的随机比例图像无效。如果你只是想实现模型中的布局:

      
      some text

1  

I was facing almost an identical problem building a nav in a content-managed site, but compounded by the fact that some of the nav items needed to open in new windows - meaning the solution to use Javascript became problematic.

在一个内容管理的网站上构建一个nav时，我几乎遇到了一个相同的问题，但由于一些nav项目需要在新的窗口中打开，这意味着使用Javascript的解决方案变得有问题。

Eventually, I ended up losing the tag and replacing with a and setting the background image inside the span (I could have used div's but that's bad form according to the W3C).

最终，我失去了 标签，替换为 ，并在span内设置背景图像(我本可以使用div，但根据W3C的规定，这不是一个好格式)。

So referring back to your original example, I'd go with:

回到你最初的例子，我想说

  
    
      My image
    
  

0  

The easiest way to make that area clickable is to add position: relative to your link style; to preserve the cursor style under IE6, you can add cursor: hand to your span element.

使该区域可点击的最简单方法是添加位置:相对于您的链接样式;要在IE6下保存光标样式，可以将光标:hand添加到span元素中。

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

As other suggested, it is better to separate the IE6 specific styling with a conditional comment block.

如前所述，最好使用条件注释块来分离特定于IE6的样式。

Hope it helps and good luck ;)

希望它能有所帮助，祝你好运;

0  

Try to apply to span css property "zoom:0;". It works in my case.

尝试应用到span css属性“zoom:0;”。它在我的例子中起作用。

0  

I wasn't able to solve this with CSS only, I used Javascript to force the area to be clickable. Disappointing, but well, it works...

我不能只用CSS来解决这个问题，我使用Javascript来强制这个区域是可点击的。令人失望，但它确实有效……

Thanks everyone for your help ! I appreciate it :)

谢谢大家的帮助!我很感激:)