16

html结构

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

Anchor 仅在 IE7 中不可点击，我知道问题的发生是因为 hasLayout，如果我们删除跨度的高度和宽度，它会正常工作。

但我需要让它在不移除高度和宽度的情况下工作。

编辑：你可以在这里摆弄一个例子：http: //jsfiddle.net/rxcAb

4

12 回答 12

13

仅 CSS 解决方案

Tomas-我将您的小提琴修改为一个工作示例。我将您的代码更改为span在a标签内使用 a ，因为在内div联元素（a标签）中具有标准块级元素（ a ）是无效的。给出a标签布局（我用过） ，inline-block然后用 a 设置 a推动标签的“下方”并使 IE7再次将标签识别为活动的。下面是我的小提琴中使用的修改后的代码。您可能希望设置一个比我的更通用的类名（您可能还希望只针对 IE7 的那些仅需要它的 CSS 属性）。我假设你正在改变和position:relativespanz-index: -1spanaaie7AFixwidthheight通过图像，因此为什么你有那些作为内联样式。

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; }

line-height如果不想只针对 IE7，则更新 Fiddle添加以我将widthandheight的spanhtml 中，只是因为原始问题（由 gviswanathan 和 Tomas 提出）要求它。如果您出于某种原因不需要设置尺寸span，而只是尝试在图像上设置双边框，那么下面评论中给出的三十多点的答案要简单得多。

于 2012-04-02T01:21:20.150 回答
5

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

$(document).ready(function () {

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

});

我已经在兼容视图模式下测试了这个模拟 IE7 和 IE8，但不能保证它本身适用于 IE7。

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

于 2011-10-12T10:15:13.363 回答
1

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

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
于 2012-04-02T08:00:09.853 回答
1

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

于 2012-09-17T15:21:40.477 回答
0

啊另一个 hasLayout 怪癖

在 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

于 2011-04-20T18:53:53.777 回答
0

为 a 元素提供以下 CSS 规则：

{
    display:block;
    overflow:hidden;
}
于 2011-04-20T18:54:33.447 回答
0

可能是一个问题，因为你没有href="#"在你的<a>标签里面定义所以，把href="#"你的标签放在里面<a>。像这样写：

<a href="#">
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>
于 2012-04-02T07:09:12.640 回答
0


只需将锚标签包裹在 Div 或 Span 中。它在IE7中工作。

这种方式是错误的..？

于 2012-04-02T07:23:52.240 回答
0

从您的帖子中，我认为您想要一个带有跨度信息文本的可点击图像！我希望这会帮助你；）

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;}​
于 2012-04-03T09:48:09.630 回答
0

请参阅小提琴的代码和演示

小提琴：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>
于 2012-04-03T17:21:14.767 回答
0

一个简单的方法是：

<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)"; }`
于 2012-08-29T07:25:56.643 回答
0

如果你有类似的东西：

<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 & chrome 中都可以点击。

于 2015-12-14T22:05:07.347 回答