转bhbhxy的提问:ie7 8 中块级元素不能正确覆盖图片的问题

cs5276 2010-01-21 12:34:03
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0; background:#FFF}
.viewBack{position:absolute; font-size:100px; color:#6B90DA; font-weight:bold; text-align:left; top:0; left:0; height:600px; line-height:600px; width:200px; cursor:pointer; display:block; z-index:100 }
.viewBack a,.viewBack a:visited{display:block; font-size:100px; text-decoration:none; color:#6B90DA;}
.viewBack a:hover{font-size:110px; color:#6B90DA!important; text-decoration:none}

.viewForward{ position:absolute; font-size:100px; color:#6B90DA; font-weight:bold; text-align:right; top:0; right:0; height:600px; line-height:600px; width:200px; cursor:pointer; display:block;z-index:100}
.viewForward a,.viewForward a:visited{display:block; font-size:100px; text-decoration:none; color:#6B90DA;}
.viewForward a:hover{font-size:110px; color:#6B90DA!important; text-decoration:none;}
</style>
</head>

<body>
<div style="position:relative; margin:0 auto; width:960px;">
<div style="text-align: center; width:800px; margin:0 auto; position:relative; z-index:1">
<img style="margin:auto; display:block" src="http://www.deskcity.com/picture/image_url/58150/FGHJ_47020.jpg" title="5654" alt="444" width="800" height="600" border="0">
</div>
<span class="viewBack"><a href="#" title="上一张"><  </a></span>
<span class="viewForward"><a href="#" title="下一张">  ></a></span>
</div>
</body>
</html>



这段代码是bhbhxy发的,上面只有简单的一个800*600的图片,和两个200*600的span,共同放在一个960宽度的容器内。想实现类似谷歌中国查看图片的效果。
这是原帖地址:http://topic.csdn.net/u/20100119/10/7c170965-438f-4330-bf1e-032034c67d28.html?85113
在Chrome浏览器下显示正常,能实现作者的效果(当鼠标滑到距离图片左或右边缘一段距离时,就能显示应有的链接效果,鼠标指针变成手形,起到引导用户的效果)
而在IE7和IE8下,只有鼠标滑出图片区域才能链接“上一张”或“下一张”图片,也就是说,span内的a标签不能覆盖图片区域。
在此之前,span和a均已转换成块级元素,但如果增加a标签的字符数(加空格),
加宽了行内a的宽度的话上述效果就可以正确显示了,左边的span可以在≶的后面加上若干个 ,用overflow:hidden;控制其200px的宽度,可以起到在Chrome下相同的效果,
但是右边的span需要设定text-align:right,如果也想通过加字符控制宽度的方法,overflow:hidden隐藏的却是右边的内容,所以另一个问题就是:如果元素设置了text-align:right,如何使overflow:hidden;隐藏左边的内容?


真诚等待高手的回答
...全文
165 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
ddcatlee 2010-01-21
  • 打赏
  • 举报
回复
direction:rtl;
cs5276 2010-01-21
  • 打赏
  • 举报
回复
。。。顶上来,还是有一个问题,大家都知道overflow:hidden可以在字符比较多的时候把右边的字符隐藏掉,可是如果一个span,给它设定了text-align:right,也就是说,把比较重要的东西放在了右边的时候,如何隐藏左边的内容呢?
ddcatlee 2010-01-21
  • 打赏
  • 举报
回复
你可以自己测试,为何总要等别人的答案?
bhbhxy 2010-01-21
  • 打赏
  • 举报
回复
[Quote=引用 10 楼 ddcatlee 的回复:]
这是Ie的bug
加背景就是为了让浏览器可以正确计算,这就是方法
[/Quote]
主要是性能上,浏览器解析的时候还需要去找这张不存在的图片
比较浪费性能
还有什么能代替这个方法吗?
ddcatlee 2010-01-21
  • 打赏
  • 举报
回复
这是Ie的bug
加背景就是为了让浏览器可以正确计算,这就是方法
bhbhxy 2010-01-21
  • 打赏
  • 举报
回复
有没有什么方法可以让浏览器能够计算正确A标签的有效范围
而不是加背景图片呢?
cs5276 2010-01-21
  • 打赏
  • 举报
回复
恩,随便的一个图片,任意的。无效路径
ddcatlee 2010-01-21
  • 打赏
  • 举报
回复
不存在的链接 是指背景图片
background:url(这里是一个不存在的图片.jpg);
bhbhxy 2010-01-21
  • 打赏
  • 举报
回复
不存在的链接是指?
<a href="#" title="上一张"><  </a>
这个已经是一个带文字的链接了啊?
还需要再加一个吗?
bhbhxy 2010-01-21
  • 打赏
  • 举报
回复
顶起!高人!
能说明一下为什么吗?
IE7和IE8特有的BUG?
cs5276 2010-01-21
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 ddcatlee 的回复:]
看到了,这个bug,可以通过给a元素设定背景来解决

background: url(xxxxx);

背景图片可以是一个透明的gif图,或者放一个不存在的链接,这样既不会显示出来,又解决了这个bug
[/Quote]

神奇哎~
解决了!~
a { background:url(a.gif) no-repeat top left;}
比较强悍,等bhbhxy来看看,哈哈,
ddcatlee 2010-01-21
  • 打赏
  • 举报
回复
看到了,这个bug,可以通过给a元素设定背景来解决

background: url(xxxxx);

背景图片可以是一个透明的gif图,或者放一个不存在的链接,这样既不会显示出来,又解决了这个bug
owen_008 2010-01-21
  • 打赏
  • 举报
回复

给楼主顶一个
ddcatlee 2010-01-21
  • 打赏
  • 举报
回复
我这里看没什么问题。

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧