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

发布于 2024-11-02 17:08:25 字数 414 浏览 3 评论 0原文

Html 结构

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

锚点仅在 IE7 中不可单击，我知道问题的发生是因为 hasLayout，如果我们删除 height &跨度的宽度，它会工作得很好。

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

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请叫√我孤独 2024-11-09 17:08:25

仅 CSS 解决方案

Tomas-我将您的小提琴修改为一个工作示例。我将您的代码更改为在 a 标记内使用 span，因为在内联元素（a 标记）。提供a标签布局（我使用inline-block），然后在该span上设置position:relative使用 z-index: -1 将 span 推到 a 标记“下方”，并使 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.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; }

更新的 Fiddle<如果不想只针对 IE7，则添加 line-height 来实现“跨浏览器”。我将 width 和 height 保留在上面的 span html 中，只是因为原始问题（由 gviswanathan 和 Tomas 提出）要求这样做。如果由于某种原因您不需要在 span 上设置尺寸，而只是尝试在图像上设置双边框，则下面评论中给出的thirtydot的答案要简单得多。

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.

回复收藏 0 原文

把人绕傻吧 2024-11-09 17:08:25

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

$(document).ready(function () {

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

});

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

您可能希望更有选择性地应用它 - 我怀疑这可能会降低旧版浏览器的性能 - 在这种情况下应用一个类（例如 ) 到所有以这种方式损坏的链接，只需将 $('a') 更改为 $('.myClass')

With jQuery, the following will force all links to work, and have the 'pointer' cursor:

$(document).ready(function () {

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

});

I've tested this simulating IE7 with IE8 in compatibility view mode, but can't guarantee it will for IE7 on its own.

You may want to apply this more selectively -- I suspect that, as is, this might slow down older browser performance -- in which case apply a class (like <a href='myClass'>) to all links that are broken this way, and just change $('a') to $('.myClass')

回复收藏 0 原文

从﹋此江山别 2024-11-09 17:08:25

您尝试过使用 HTML5 shim 吗？它对解决由 hasLayout 引起的问题有很大帮助。

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

Have you tried using the HTML5 shim? It helps a lot with issues that are caused by hasLayout.

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

回复收藏 0 原文

萌酱 2024-11-09 17:08:25

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

回复收藏 0 原文

黎夕旧梦 2024-11-09 17:08:25

将以下 CSS 规则赋予 a 元素：

{
    display:block;
    overflow:hidden;
}

give the following CSS rules to the a element:

{
    display:block;
    overflow:hidden;
}

回复收藏 0 原文

一紙繁鸢 2024-11-09 17:08:25

啊另一个 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。网

Ah another hasLayout quirk

it's not possible to achieve in IE7 and still retain the width of the span, if you could show what you're trying to achieve in a JS fiddle perhaps we could help, find a way around it e.g. and this is only a guess, putting the width on the anchor with some padding would help create a completely clickable area and still allow a "caption" span to be restrained if that's what you're after..

Example workaround not a fix

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>

The above is only a thought, and if it's not what you're after, then please provide a sample jsfiddle.net

回复收藏 0 原文

雪落纷纷 2024-11-09 17:08:25

可能是问题是因为您没有在标签中定义 href="#" 所以，把 href="#" 在您的标签内。像这样写：

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

May be it's a problem is that because you didn't define href="#" inside your <a> TAG So, put href="#" inside your <a> TAG. Write like this:

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

回复收藏 0 原文

一杯敬自由 2024-11-09 17:08:25

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

这个方法错了..？

回复收藏 0 原文

紙鸢 2024-11-09 17:08:25

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

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

From your post I think u wanted a clickable image with span info text !! I hope this will help u ;)

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

回复收藏 0 原文

涫野音 2024-11-09 17:08:25

请参阅小提琴代码和演示

小提琴： 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>

See fiddle for code and demo

Fiddle: http://jsfiddle.net/rxcAb/29/

Demo: http://jsfiddle.net/rxcAb/29/embedded/result/

Perfectly working in IE7, IE8, FF, Chrome, Safari.

No changes in code: See below

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

回复收藏 0 原文

青瓷清茶倾城歌 2024-11-09 17:08:25

一个简单的方法是：

<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)"; }`

An easy way to do this is:

<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)"; }`

回复收藏 0 原文

爱的故事 2024-11-09 17:08:25

如果您有类似的内容：

<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 & 中可单击。铬合金。

If you have something like:

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

Simply add a style property to the anchor like this:

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

This will make the div and everything inside of it clickable in IE7+ and firefox & chrome.

回复收藏 0 原文

~没有更多了~

关于作者

思念满溢

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（12）

仅 CSS 解决方案

CSS Only Solution

关于作者

相关话题

热门标签

推荐作者

玍銹的英雄夢

我不会写诗

十六岁半

浸婚纱

qq_kJ6XkX

旧伤还要旧人安

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（12）

仅 CSS 解决方案

CSS Only Solution

关于作者

相关话题

热门标签

推荐作者

玍銹的英雄夢

我不会写诗

十六岁半

浸婚纱

qq_kJ6XkX

旧伤还要旧人安

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。