Question

Html结构

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

锚点只能在IE7中点击，我知道问题是因为hasLayout而发生的，如果我们删除高度＆amp;跨度的宽度，它将正常工作。

但我需要让它能够消除身高和身高。宽度。

编辑：您可以在此处举例说明：http://jsfiddle.net/rxcAb

Answer 1

仅CSS解决方案

托马斯 - I modified your fiddle into a working example。我将代码更改为在span代码中使用a，因为内联元素（div中的标准块级元素（a）无效标签）。提供a代码布局（我使用inline-block），然后使用position:relative在span上设置z-index: -1会推送下面的span “a标记并使IE7再次将a标记识别为有效。下面是我小提琴中使用的修改后的代码。您可能希望设置一个比我的ie7AFix更通用的类名（您可能也希望仅针对那些仅为其所需的CSS属性定位IE7）。我假设您通过图像改变width和height，因此您将其作为内联样式。

<强> 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 ，添加了line-height以制作“跨浏览器”，如果您不想仅针对IE7。我将width和height保留在上面的span html中，只是因为原始问题（由gviswanathan和Tomas都提出）要求它。如果由于某种原因您不需要在span上设置尺寸，而只是尝试在图像上设置双边框，那么thirtydot's answer given in the comment's below就会简单得多。

Answer 2

使用jQuery，以下将强制所有链接工作，并具有“指针”光标：

$(document).ready(function () {

    $('a')
        .click(function () {        
            window.location = $(this).attr('href');
        })
        .hover(function () {
            $(this).css('cursor', 'pointer');
        });

});

我已经在兼容性视图模式下使用IE8测试了这个模拟IE7，但不能保证它将自己用于IE7。

您可能希望更有选择性地应用它 - 我怀疑，这可能会降低旧版浏览器的性能 - 在这种情况下，将类（如<a href='myClass'>）应用于所有被破坏的链接方式，只需将$('a')更改为$('.myClass')

即可

Answer 3

您是否尝试过使用HTML5垫片？它对hasLayout引起的问题有很大帮助。

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 4

从IMG中取出SPAN。 IMG元素可以像任何其他元素一样使用类来设置样式，因此您不需要在它周围使用。

Answer 5

啊another hasLayout quirk

它不可能在IE7中实现并仍然保持跨度的宽度，如果你可以展示你想要在JS小提琴中实现的目标，也许我们可以提供帮助，找到解决方法，例如这只是一个猜测，将宽度放在anchor上并加上一些填充将有助于创建一个完全可点击的区域，并且仍然可以限制“标题”跨度，如果这就是你所追求的......

示例解决方法而非修复

<强> CSS：

a {
  display: inline-block;
  background: #ff0; 
  max-width: 50px; 
  padding: 10px; 
  text-align: center;
}

img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}

HTML：

<a href="#">
   <img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
   <span>Some text and even longer</span>
</a>

以上只是一个想法，如果不是你想要的，请提供样本jsfiddle.net

Answer 6

将以下CSS规则提供给a元素：

{
    display:block;
    overflow:hidden;
}

Answer 7

可能是因为您没有在href="#" TAG中定义<a>，所以请将href="#"放在<a>标签内。写得像这样：

<a href="#">
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>

Answer 8

只需在Div或Span中包含锚标记即可。它在IE7中工作。

这种方式错了..？

Answer 9

从您的帖子中我想你想要一个带有span信息文字的可点击图片!!我希望这会对你有所帮助;）

http://jsfiddle.net/ajinkyax/v5KH5/3/

<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>

CSS：

.imgLink {display: block; width: 200px; text-align: center;}

Answer 10

请参阅小提琴代码和演示

小提琴：http://jsfiddle.net/rxcAb/29/

演示：http://jsfiddle.net/rxcAb/29/embedded/result/

在IE7，IE8，FF，Chrome，Safari中完美运作。

代码无变化：见下文

<a href=http://www.google.com/>
<div class="gal_image" 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;">
</div>
</a>

Answer 11

一种简单的方法是：

<p>
 <span><img></span>
 <span> Some text <span>
 <a></a>
<p>

p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`

Answer 12

如果你有类似的话：

<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>

只需将样式属性添加到锚点，如下所示：

<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">

这将使div及其内部的所有内容在IE7 +和firefox＆amp;中可点击铬。

仅在IE7中，图像不能在锚点内单击

12 个答案:

仅CSS解决方案