1
在ios8系统中，用h5与APP通信不能传带有复杂链接符的字符串。
在移动端开发中，经常需要h5与APP进行交互。这时就需要前端和APP开发人员双方规定一种传输协议。在协议中可以添加与APP交互需要的参数。但是在IOS8系统中，不支持参数中有复杂链接符，比如JSON格式的字符串、&等等。目前为止，下划线是唯一支持的连接符。
2
safari中伪元素不支持CSS3动画。
在项目中肯定有很多前端开发人员使用css的伪元素属性进行页面构建。虽然这种方式很方便，但是在safari中并不支持伪元素的CSS3动画效果。
3
safari中当一个元素的高度为零时，下边的同级元素的上外边距会覆盖这个元素。
在IE、chromet、FF中，即使一个元素的高度为0，也会把它当作块级元素看待，在页面中占据相应的位置。但是在safari中，高度为0的元素会被直接忽略。
4
ios系统中在移动浏览器的页面中给按钮加JS事件，其按钮必须是原生HTML按钮或者由<a>标签自定义构成。
这个问题当时困扰了小编很久，经过一番盘查，终于解决。原来在IOS系统中，浏览器只支持给原生HTML按钮或<a>标签加JS事件。
5
在移动浏览器中给根元素（例如：html）添加overflow:hidden，只有在某些安卓自带浏览器（例如华为的自带浏览器）中才有效。
overflow:hidden这个CSS样式是大家常用到的。大家用这个样式可以实现很多目的。其中一个常用的就是隐藏内容溢出，把浏览器的滚动条隐藏。这个在PC端浏览中毫无问题。但是除了少数安卓自带浏览器，在大多数移动浏览器中，给根元素（例如：html）添加这个样式就会失效。除非给根元素同时添加有实际数值的高度。为了适应移动端频幕的多种尺寸，只能运用JS动态获取视窗的高度，然后给根元素设置相同的高度，方可把移动浏览器的滚动条隐藏。
6
在某些安卓系统手机自带浏览器（例如：华为手机）中，当父级元素是弹性盒子布局时（含有-webkit-box-flex属性），其子元素的margin-bottom失效，不能撑开父级元素。
这个问题是小编在某个移动项目开发中碰到的。直接将外边距（margin）改为内边距(padding)就可解决。
7
在safair中使用Date.parse()解析时间字符串，其格式必须是YYYY/MM/DD HH:MM:SS。
Date.parse() 方法解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数，如果该字符串无法识别，或者一些情况下，包含了不合法的日期数值（如：2015-02-31），则返回值为NaN。
上述是JavaScript 参考文档的说明。严格来说，其解析的时间字符串必须是YYYY/MM/DD HH:MM:SS。但是，在IE、chrome、FF中，也可以解析YYYY-MM-DD HH:MM:SS或者YYYY.MM.DD HH:MM:SS这两种非标准格式的时间字符串。而safari只能解析标准格式。因此，开发人员在使用这个方法时，最好先把非标准格式转换成标准格式，这样就可以避免兼容问题。
8
在IOS系统中H5播放器不支持自动播放。
在iphone和ipad上用HTML5播放器时，不能自动播放，apple的解释说是为用户节省流量，我觉得这个考虑有点多余。
当时为了解决这个问题，做了些调研，最好的方法就是在IOS系统的浏览器中给页面根元素绑定一次touchstart事件播放流媒体文件，模拟自动播放。
9
标准浏览器是只认识documentElement.scrollTop的，但chrome却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop。
document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，可以这样：
<figure style="margin: 1em 0px; color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
image
</figure>
任选上述其中一种方式都可以解决。
10
我们常说的事件处理时的event属性，在标准浏览器其是传入的，IE下由window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement
网友评论