记录在开发微信公众号的时候遇到的一些浏览器差异导致css失效的问题:
1.渐变线:
IE等浏览器可以正常展现的渐变线,在微信上就是实线,例子:
<hr width=80% size=3 color=#5151A2 style="FILTER: alpha(opacity=100,finishopacity=0,style=3)">
最后用图片代替。
2.绝对定位导致被遮挡的点击事件失效,直接上代码,这是一个典型的头部菜单栏,中间标题,两边各一个小图标。该代码在IE等浏览器中,可以实现两边的小图标点击事件,但是在微信上无效。
<div style="width:100%;height:40px;background-color:#fff;padding-top:10px;top:0px;z-index:0;position:absolute;">
<div style="width:50px;float:left;margin-left:16px;" οnclick="alert(1);">
<img src="resources/images/top/back.png"></img>
</div>
<div style="width:50px;float:right;text-align:right; margin-right: 16px;">
<img src="resources/images/top/main.png"></img>
</div>
</div>
<div style="text-align:center;height: 40px;width: 100%;top:15px;z-index:1;position:absolute;">
选择分类
<img src="resources/images/top/down.png"></img>
</div>
在微信浏览器上的解决方案,其实就是需要将有事件的涂层放到上面:
<div style="width:50px;float:left;margin-left:16px;padding-top:10px;top:0px;z-index:2;position:absolute;background-color:#fff;" οnclick="alert(1);">
<img src="resources/images/top/back.png"></img>
</div>
<div style="width:50px;float:right;text-align:right;right: 16px;padding-top:10px;top:0px;z-index:2;position:absolute;background-color:#fff;">
<img src="resources/images/top/main.png"></img>
</div>
<div style="background-color:#fff;text-align:center;height: 40px;width: 100%;top:0px;padding-top:15px;z-index:1;position:absolute;">
选择分类
<img src="resources/images/top/down.png"></img>
</div>