CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

1
2
3
4
5

div { 
	width: 95%; 
	width: -webkit-calc(100% - 50px); 
	width: calc(100% - 50px); 
}

iOS6下伪类:hover在除了<a>之外的元素上无效；在Android下则有效。
类似

1

div#topFloatBar_l:hover #topFloatBar_menu { display:block; }

这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。详细介绍见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

1

pointer-events: none;

在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

1

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/244.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。