ie6和ie7下链接图片点不中问题讨论

2016-02-20 00:14 11 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享ie6和ie7下链接图片点不中问题讨论,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

最近重新审视了一下块集元素和内联元素,不是混淆,而是重新想了一下新的东西,有时候在我们进行重构的时候,偶尔会为了实际需要而将内联元素强制显示为块集元素,在一般情况下,这个是不会出问题的,而且可以很轻松的通过标准,但是在某一些情况下,虽然验证工具可以放过我们,但是在ie6下面会出现解析不正确的问题,下面就简单跟大家分享一下这个问题。

有时候由于需要文字和图片同时获取到点击态,或者需要实现一些高难度的效果,就需要多标签来写结构,可能的结构会如下所示:

div class="block"
    a href="http://www.webjx.com"spanimg src="http://www.webjx.com/wp-admin/images/webjx.png" alt="Raina" //span/a
/div

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

在没有被赋予强大的CSS的时候,是可以正常点击的,但是当赋予需要的CSS的时候,在ie8一下就会出现图片区域点击不到的情况:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

.block span{float:left;}

如果将span标签块集化:

.block span{float:left;dispaly:block;width:100px;height:100px;}

最终的结果依然不是不能点击到,但是图片区域以为的内容确可以正常点击。

而对于此,我的理解是这样的:

因为a标签本身就是一个内联元素标签,内联标签内正常情况只允许放置内联元素,放置块集元素本身语法就有问题,虽然表面上放置的span标签,但是我们又将其强制块集化,在某些浏览器下还是会解析错误,比如说ie6/7,所以这里针对链接的这种情况,出现的问题就是图片区域无法点击。

针对这种问题的解决方法:

保证在a标签中不要放置块集元素,或者强制块集元素,如果需要解决一些特殊效果,可以采取将这个强制元素跟a内置的img标签同级放置,这样也可以避免图片点击不到问题。

来源:http://www.tulaoshi.com/n/20160220/1631526.html

延伸阅读
标签: Web开发
关于CSS HACK的文章在webjx.com中提及的也很多。 CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。 FF浏览器 .test{     height:20px;     background-color:orange; } IE7浏览器 *+html .test{/*IE7*/     height:20px;     background-color:blue; ...
标签: Web开发
效果地址: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlefixed ie6/titlest...
标签: Web开发
关于CSS HACK的文章在52CSS.com中提及的也很多。CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。您也可以参考下面的文章 FF浏览器 .test{     height:20px;     background-color:orange; }   IE7浏览器  *+html .test{/*IE7*/     height:20px;    ...
标签: Web开发
简单试用了一下IE8后,今天相对有时间点,对IE8、IE7、IE6、Firefox2.0.0.12做了简单的一些CSS HACK测试。 样式代码: p {color:#f00;} xhtml代码: p文字/p 主要是测试文字这个颜色在不同浏览器下使用hack的一些结果报告。 早上测试的东西少了几个,这里补上,还有更多的东西等怿飞的测试报告。下午有时间再看看...
CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。 FF浏览器 .test{     height:20px;     background-color:orange; } IE7浏览器 *+html .test{/*IE7*/     height:20px;     background-color:blue; } ...

经验教程

625

收藏

32
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部