微信浏览器与一般浏览器的差异

来源：互联网发布：nba凯尔开人球队数据编辑：程序博客网时间：2024/06/05 12:02

记录在开发微信公众号的时候遇到的一些浏览器差异导致css失效的问题：

1.渐变线：

IE等浏览器可以正常展现的渐变线，在微信上就是实线，例子：

最后用图片代替。

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;" onclick="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;" onclick="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>

0 0