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

最新推荐文章于 2024-04-20 17:59:05 发布

百世经纶-

最新推荐文章于 2024-04-20 17:59:05 发布

阅读量3.1k

点赞数

分类专栏：微信文章标签：微信 css 浏览器

本文链接：https://blog.csdn.net/u013369226/article/details/38708783

版权

微信专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录在开发微信公众号的时候遇到的一些浏览器差异导致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;" ο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>