web页面HTML&CSS

即问即整理

1、IOS APP 内嵌H5页面，当H5页面中使用了CSS3动画，会导致页面文本选择功能无法正常使用（拷贝、词典、添加……）。而直接将H5页面在浏览器中打开则是可以启用。

解决：如果页面需要使用文本选择功能，那么只能删除CSS3动画。

2、给HTML标签动态添加style，在ios是会导致添加的style无效

原因：直接使用HTML方式直接添加style，即document.documentElement.style="font-size: 30px"

解决：使用DOM 元素设置属性setAttribute来进行，即可生效！即：document.documentElement.setAttribute('style', 'font-size: 30px');

3、重定向（301-302）页面是否产生浏览器历史记录？如果是，浏览器表现是否存在差异？

测试：准备两个页面A，B；A页面作用是跳转到B，B页面通过location.href重定向到其他页面，使用浏览器返回302状态。

结果：通过测试使用location.href方式重定向一个页面，在IE8及以下会产生3个历史记录，一个为A，一个为B，一个为重定向页面。但在IE8+及主浏浏览器上却会会产生2条历史，一个为A，一个为重定向页面。效果与location.replace方法一样

解决：将location.href替换成location.replace方法，这样可以保证所有浏览器对于重定向的页面历史处理保持一致

4、cookie 带 httponly属性

Cookie的 HttpOnly 属性，指示浏览器 不要在除 HTTP（和 HTTPS)请求之外 暴露Cookie。一个有HttpOnly属性的Cookie，不能通过非HTTP方式来访问，例如通过调用JavaScript(例如，引用 document.cookie），因此，不可能通过跨域脚本（一种非常普通的攻击技术）来偷走这种Cookie。尤其是Facebook 和 Google 正在广泛地使用HttpOnly属性。

5、fastclick 插件，导致label内嵌元素点击后，无法触发label事件。

这是因为fastclick对input相关的元素进行了封装处理，导致事件冒泡失效，解决方法可以通过新的CSS属性：pointer-events 来解决；具体：label中添加pointer-events样式。

label > * { pointer-events: none; }