图像不能在IE7内的锚点内单击 [英] Image is not clickable inside anchor only in IE7

问题描述

Html结构

 < a> 
< span> <！ -  Span has width& height  - > 
< img> 
< / span> 
< span>一些文字< span> 
< / a> 
 

锚点不能在IE7中单击，我知道问题发生，因为hasLayout，如果我们删除高度&宽度的范围，它会工作正常。

但我需要使它的工作与出去除高度&

您可以在这里提供一个范例： http://jsfiddle.net/rxcAb

解决方案

CSS Only解决方案

Tomas- 我将您的小提琴修改为一个工作示例。我改变你的代码在 a 标签内使用 span ，因为它是无效的标准块级元素a a 标签中的 div ）。给出 a 标签布局（我使用 inline-block ），然后设置在上使用 z-index：-1 在 span $ c> span 下面的标签，并使IE7识别 a 再次激活。下面是我的小提琴中使用的修改代码。你可能想要设置一个比我的 ie7AFix 更通用的类名（你可能也想要只为目标IE7的CSS属性，它只需要它）。我假设你改变图像的宽度和高度，因此为什么你有那些作为内联样式。

HTML

 < a href =http://www.google.com/class =ie7AFix> 
< span style =width：222px; height：150px;> 
< img src =http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpgstyle =width：220px; height：148px;> ; 
< / span> 
< / a> 
  

CSS

  a.ie7AFix {
 display：inline-block; / *需要设置hasLayout; zoom：1，etc。* / 
} 
 
 .ie7AFix span {
 border：solid＃666 4px; 
 display：block; 
 position：relative; 
 z-index：-1; 
 line-height：0; / *这使它跨浏览器消除额外的底部空间* / 
} 
 
 .ie7AFix img {border：1px solid red; } 
  

更新小提琴 添加了 line-height ，以便制作跨浏览器（如果不想仅定位到IE7）。我在 span html中保留了 width 和 height ，只是因为原来的问题（通过gviswanathan和Tomas）都要求它。如果你不需要为某些原因在 span 上设置尺寸，而只是想在图像上做一个双边框，那么在以下评论中给出的三十点的回答简单得多。

Html Structure

<a>
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>

Anchor is not clickable only in IE7, I know the issue happens because of hasLayout, if we remove height & width of the span, it will work fine.

But I need to make it work with out removing height & width.

EDIT: You can fiddle with an example here: http://jsfiddle.net/rxcAb

解决方案

CSS Only Solution

Tomas-I modified your fiddle into a working example. I changed your code to use a span inside the a tag because it is invalid to have a standard block level element (a div) in an inline element (an a tag). Giving the a tag layout (I used inline-block) and then setting a position:relative on that span with a z-index: -1 pushes the span "below" the a tag and makes IE7 recognize the a tag as active again. Below is the modified code used in my fiddle. You might want to set up a more generic class name than my ie7AFix (you probably will also want to just target IE7 for those CSS properties that are necessary for it only). I assume you are varying the width and height by images, and hence why you have those as inline styling.

HTML

<a href="http://www.google.com/" class="ie7AFix">
  <span style="width:222px; height: 150px;">
    <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
  </span>
</a>

CSS

a.ie7AFix {
    display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}

.ie7AFix span {
    border: solid #666 4px;
    display: block;
    position: relative;
    z-index: -1;
    line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}

.ie7AFix img { border: 1px solid red; }

Updated Fiddle with line-height added to make "cross browser" if one does not want to target IE7 only. I kept the width and height in the span html above, only because the original question (by both gviswanathan and Tomas) requested it. If you don't need to set the dimensions on the span for some reason, but are simply trying to do a double border on the image, then thirtydot's answer given in the comment's below is much simpler.

这篇关于图像不能在IE7内的锚点内单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！