响应式网站项目中的CSS兼容性速记几条

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注