风也温柔

计算机科学知识库

前端解决浏览器兼容 10个容易忽略的前端兼容性问题

  兼容问题一直是前端工程师们的梦魇。今天,为大家总结10个容易忽略的前端兼容性问题,供大家参考。

  1

  在ios8系统中,用h5与APP通信不能传带有复杂链接符的字符串。

  在移动端开发中,经常需要h5与APP进行交互。这时就需要前端和APP开发人员双方规定一种传输协议。在协议中可以添加与APP交互需要的参数。但是在IOS8系统中,不支持参数中有复杂链接符,比如JSON格式的字符串、&等等。目前为止,下划线是唯一支持的连接符。

  2

  中伪元素不支持CSS3动画。

  在项目中肯定有很多前端开发人员使用css的伪元素属性进行页面构建。虽然这种方式很方便,但是在中并不支持伪元素的CSS3动画效果。

  3

  中当一个元素的高度为零时,下边的同级元素的上外边距会覆盖这个元素。

  在IE、、FF中,即使一个元素的高度为0,也会把它当作块级元素看待前端解决浏览器兼容前端解决浏览器兼容 10个容易忽略的前端兼容性问题,在页面中占据相应的位置。但是在中,高度为0的元素会被直接忽略。

  4

  ios系统中在移动浏览器的页面中给按钮加JS事件,其按钮必须是原生HTML按钮或者由标签自定义构成。

  这个问题当时困扰了小编很久,经过一番盘查,终于解决。原来在IOS系统中,浏览器只支持给原生HTML按钮或标签加JS事件。

  5

  在移动浏览器中给根元素(例如:html)添加:,只有在某些安卓自带浏览器(例如华为的自带浏览器)中才有效。

  :这个CSS样式是大家常用到的。大家用这个样式可以实现很多目的。其中一个常用的就是隐藏内容溢出,把浏览器的滚动条隐藏。这个在PC端浏览中毫无问题。但是除了少数安卓自带浏览器,在大多数移动浏览器中,给根元素(例如:html)添加这个样式就会失效。除非给根元素同时添加有实际数值的高度。为了适应移动端频幕的多种尺寸前端解决浏览器兼容,只能运用JS动态获取视窗的高度,然后给根元素设置相同的高度,方可把移动浏览器的滚动条隐藏。

  6

  在某些安卓系统手机自带浏览器(例如:华为手机)中,当父级元素是弹性盒子布局时(含有--box-flex属性),其子元素的-失效,不能撑开父级元素。

  这个问题是小编在某个移动项目开发中碰到的。直接将外边距()改为内边距()就可解决。

  7

  在中使用Date.parse()解析时间字符串,其格式必须是YYYY/MM/DD HH:MM:SS。

  文章来源:http://www.toutiao.com/a6566032431650963971/