156-0102-3311
联系QQ 284710375
首页 > 闲情逸致 > 工作小记
分享到:收藏

IE浏览器对background:transparent不兼容的问题2018-04-16 16:48:13

今天在做一个弹窗效果时,关闭弹窗在ie浏览器中怎么点也没有效果。

开始怀疑是ie对于jquery的不兼容,百度搜了一下有很多说在ie中jq的click没有反应,于是设置了这句话:

,把ie版本提高一点希望会有效果,确实是有效果了,大部分的浏览器兼容模式下恢复正常,但是还有个别浏览器不行。

于是乎又采纳别人的建议,把jq版本降到1.4.3,很多人说这个版本对ie兼容最佳,换了之后无奈还是那个样子。

这时候我的想法是:这个问题和jquery无关,应该是哪个部分有冲突或者有小bug导致不能正常执行。

于是我开始仔细的查,代码一行一行的过。

开始做弹窗时,我把关闭按钮设置了宽和高,同时背景色设置了透明background:transparent,因为弹窗是整张图片,关闭按钮也在上面,我没有分开切,现在出错了,我为了调试时看起来方便,便对关闭按钮随便设置了一个颜色background:red,这时我试着点了几次关闭,奇怪的事情发生了,每次点都可以关掉,完全正常。我把背景色换回透明,又不正常了。

于是乎,再次百度IE浏览器和background:transparent之间的问题,果不其然,他们是有问题的。

科普开始:

background:transparent,默认在IE上会被解析成 background: none transparent scroll repeat 0% 0% 
 
transparent表示透明无颜色 
none 表示没有设置背景图片
repeat 表示图片重复
scroll 表示背景图片随浏览器下拉而滚动
0%水平位置在x0
0%垂直位置在y0



解决方法:
1、干掉background:transparent,用透明的背景图来代理它,切不可不设置background,否则效果和background:transparent一样。
2、随便设置一个背景色background:#fff,然后把这一块设置成透明filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

如此甚好。

打赏

阅读排行

    大家都在搜

    博客维护不易,感谢你的肯定
    扫码打赏,建议金额1-10元
  • 15601023311