使用 background:url(#) 解决 IE bug

通过设置selector{background:url(#)}可以解决一些IE6&7 bug：

  1. 鼠标滚轮失效bug，demo。当时用的是添加背景色的方法： 
    #works{background:#fff}

    也可通过下面方法解决：

    #works{background:url(#)}
  2. a 标签为了 png-24 图片透明而使用透明滤镜后导致 a 链接不可点击，demo 
    a{background:none}

    解决方法(demo)：

    a{background:url(#);/*或指向透明的gif*/}

    详见 No Transparency Click Bug

  3. a 局部点击bug，demo。
    解决方法(demo)：

    a{background:url(#)}

    或：

    a{background: #fff}

    详见：Partial Click Bug v2

  4. 自定义cursor的元素覆盖在img元素上时失效 
    <!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>IE 6/7/8 cursor bug</title>
<style>
.photo-viewer{width:276px;}
.photo-viewer .inner{position:relative;#zoom:1;_overflow:hidden;}
.cursor-l{position:absolute;top:0;left:0;width:33%;height:100%;overflow:hidden;line-height:99;cursor:url('http://imgcache.qq.com/campus/images/pre.cur'),auto;}
</style>
</head>

<body>

<div class="photo-viewer">
	<div class="inner">
		<img alt="Google" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">
		<a class="cursor-l" href="#" title="上一页">上一页</a>
	</div>
</div>

</body>

</html>

    解决方法：cursor-l上加background:url(#)

延伸阅读：

Tags:

This entry was posted on 星期二, 九月 8th, 2009 at 17:23 and is filed under 未分类. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.

5 comments

  1. old9 说：
    2010/05/11 于 15:17

    good，我以前用的是指向一个不存在的图。

    回复
  2. guny 说：
    2010/07/10 于 13:12

    demo跑哪儿去啦。

    回复

Trackbacks/Pingbacks

  1. Tweets that mention 使用 background:url(#) 解决 IE bug « 99css -- Topsy.com 说：
    2010/05/12 于 19:18

    [...] This post was mentioned on Twitter by ytzong. ytzong said: 使用 background:url(#) 解决 IE bug: http://goo.gl/xAHh //补充了第四条 [...]

    回复
  2. background:url(#)的性能问题 « 99css 说：
    2010/07/10 于 12:36

    [...] 很久之前写了使用 background:url(#) 解决 IE bug，原理是请求一张不存在的图片，不过写法有些问题。 [...]

    回复

Leave a comment