IE上关于PNG做背景,层上超链接不能点击的解决办法
2009-11-24 17:45
363 查看
CSS代码:引用[/u]<style type="text/css">
.pngbg{background:url(menubarbg.png) no-repeat;}
.pnglink{height:145px;width:232px;}
#area{left:20px;top:20px;position:relative}
</style>
<!--[if lt IE 7]><style>
.pngfixed {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='menubarbg.png', sizingMethod='crop');
}
.pngbg {background-image: none;}
</style><![endif]-->Html代码:引用[/u]<div class="pngbg pnglink">
<div class="pnglink pngfixed">
<div id="area">
<a href="http://www.enterdesk.com">Fixed PNG-A-HREF-Cann't Click</a>
</div>
</div>
</div>几个注意的地方,这个是解决IE下出现的问题,FF没问题
1.ID=area的DIV,是放置PNG背景层上的内容,此DIV需有position属性,absolute 或者relative都行,position有继承关系,所以最好前面的DIV也设置position,这样定位方便.
2.背景的高度定义在.pnglink这个class里面,不可定义在pngbg的class里面
能点和不能点的演示地址:http://www.dodo.hk/play/png.html
///我使用后的心得
不需要这么复杂,问题在于PNG层的CSS不要设置为Position:Relative;可以在中间加一个Relative层,在这个层里面加上内容,其上的事件都可以响应。
CSS代码:
.Relative
{
position:relative;
}
div#News
{
width:365px;height:188px;background:url('/Images/beijing.png') no-repeat;float:left;
}
* html div#News { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/Images/beijing.png");background-image: none; }
div#News div#More
{
width:39px;height:13px;position:absolute;top:160px;right:10px;background:url('/Images/more.gif') no-repeat;
}
div#News div#NewsItems
{
width:340px;height:110px;position:absolute;top:45px;left:15px;
}
HTML代码:
<div id="News">
<div class="Relative">
<div id="NewsItems">
...
</div>
<div id="More"></div>
</div>
</div>
.pngbg{background:url(menubarbg.png) no-repeat;}
.pnglink{height:145px;width:232px;}
#area{left:20px;top:20px;position:relative}
</style>
<!--[if lt IE 7]><style>
.pngfixed {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='menubarbg.png', sizingMethod='crop');
}
.pngbg {background-image: none;}
</style><![endif]-->Html代码:引用[/u]<div class="pngbg pnglink">
<div class="pnglink pngfixed">
<div id="area">
<a href="http://www.enterdesk.com">Fixed PNG-A-HREF-Cann't Click</a>
</div>
</div>
</div>几个注意的地方,这个是解决IE下出现的问题,FF没问题
1.ID=area的DIV,是放置PNG背景层上的内容,此DIV需有position属性,absolute 或者relative都行,position有继承关系,所以最好前面的DIV也设置position,这样定位方便.
2.背景的高度定义在.pnglink这个class里面,不可定义在pngbg的class里面
能点和不能点的演示地址:http://www.dodo.hk/play/png.html
///我使用后的心得
不需要这么复杂,问题在于PNG层的CSS不要设置为Position:Relative;可以在中间加一个Relative层,在这个层里面加上内容,其上的事件都可以响应。
CSS代码:
.Relative
{
position:relative;
}
div#News
{
width:365px;height:188px;background:url('/Images/beijing.png') no-repeat;float:left;
}
* html div#News { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/Images/beijing.png");background-image: none; }
div#News div#More
{
width:39px;height:13px;position:absolute;top:160px;right:10px;background:url('/Images/more.gif') no-repeat;
}
div#News div#NewsItems
{
width:340px;height:110px;position:absolute;top:45px;left:15px;
}
HTML代码:
<div id="News">
<div class="Relative">
<div id="NewsItems">
...
</div>
<div id="More"></div>
</div>
</div>
相关文章推荐
- 关于某些图片在ie中不能正常显示的解决办法之一
- 解决IE6.0下png背景透明及连接不能点击
- CSS IE6 下 PNG背景应用滤镜后 超链接失效的解决办法
- 关于IE8下google搜索框不能使用的解决办法
- 关于IE非安全更新带来flash和ActivX不能激活的解决办法(zt)
- 关于IE下英文字体跟中文字体不能对齐的根源以及解决办法
- 关于ListView中点击条目不生效的解决办法
- 关于水晶报表在IE中不显示工具条的解决办法
- IE6解决png背景不透明办法
- 关于IE11访问百度贴吧不能翻页的解决办法
- 关于IE某些原因导致下拉列表弹出阻止窗口的解决办法
- 微信开发关于外部超链接的解决办法!
- 关于验证码插件-kaptcha不能在html中使用的解决办法
- 关于eclipse不能自动补全的解决办法
- IE对margin:0 auto 不能居中的解决办法
- 关于oracle客户端不能使用的解决办法
- IE不能显示PNG图片的解决方法
- 关于64位win7、win8.1下keil V3不能破解的解决办法
- chrome和IE不能访问外网的解决办法
- 关于在eclipse中创建servlet不能自动添加web.xml文件的解决办法