1.iphone5 flex不生效
父元素display为flex,子元素如果是行内元素设置样式 flex为1样式不生效。要把行内元素改为块级元素才可生效。比如行内元素是a改为div即可。实例如下：
原代码
<div class="title">
<a >页签1</a>
<a >页签2</a>
</div> .title {
display: flex;
height: 0.4rem;
justify-content: center;
background: #ffffff;
width: 100%;
a{
flex-grow:1;
flex-shrink:1;
flex-basis:0;
text-align: center;
line-height: 0.4rem;
font-size: 0.14rem;
}
a:nth-child(1) {
color: #0076ff;
border-bottom: 1px solid #0076ff;
}
}正确代码：
<div class="title">
<div>页签1</div>
<div>页签2</div>
</div> .title {
display: flex;
height: 0.4rem;
justify-content: center;
background: #ffffff;
width: 100%;
div{
flex-grow:1;
flex-shrink:1;
flex-basis:0;
text-align: center;
line-height: 0.4rem;
font-size: 0.14rem;
}
div:nth-child(1) {
color: #0076ff;
border-bottom: 1px solid #0076ff;
}
}2.禁止html元素被选中
在浏览器中双击元素，元素会被选中。如果要禁止元素在点击过程中被选中，方法如下：
以input和div为例，再不做任何处理可以复现双击元素，元素会被选中的问题（我主要在PC做了实验）
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="input" placeholder="禁止select" />
<div>33333333333333</div>
</body>
</html>方法1，通过样式，主要用到user-select，兼容性如下
但据我测试结果input除了火狐浏览器可以，ie,chrome,safari都无效，safari甚至有副作用，input都不能输入了。IE浏览器本身PC端user-select只兼容到IE10，所以只靠这个样式并不能完美解决，代码如下
<!DOCTYPE html>
<html>
<head>
<style>
input{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
div{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
</style>
</head>
<body>
<input type="text" id="input" placeholder="禁止select" />
<div>33333333333333</div>
</body>
</html>方法2，通过js,给元素添加onselectstart事件，并返回false。
该方法真机ie9可以兼容，模拟ie8也没问题。除了chrome input元素有问题，以及safari不能输入，其他浏览器均表现完美。代码如下
<!DOCTYPE html>
<html>
<head>
<style>
input{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
div{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
</style>
</head>
<body>
<input type="text" id="input" placeholder="禁止select" onselectstart="return false"/>
<div onselectstart="return false">33333333333333</div>
</body>
</html>最终方案，safari浏览器比较特殊，input不能加user-select：none;样式，否则，不可编辑。总不能为了禁用选中不让编辑了吧，最后只能把这个样式去掉，或者改为user-select：text; -khtml-user-select:none 样式也要去掉，否则safari下input也不可编辑。那么最终方案如下：（遗憾的的是safari和chrome下input还有选中样式，有方案的同学可留兰）
<!DOCTYPE html>
<html>
<head>
<style>
input{
-moz-user-select:none;/*火狐*/
-webkit-user-select: text;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
user-select:none;
}
div{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
</style>
</head>
<body>
<input type="text" id="input" placeholder="禁止select" onselectstart="return false"/>
<div onselectstart="return false">33333333333333</div>
</body>
</html>3.ie8浏览器透明度兼容性问题
原代码
background: rgba(0, 0, 0, 0.7);该代码在ie9及以上是可以的，但ie不支持，原因是rgba在ie浏览器只支持到ie9及以上。要想兼容ie8，需使用filter。代码如下
background: rgb(0, 0, 0);
filter: alpha(opacity=70); /*兼容ie8*/
opacity: 0.7; /*透明度*/4.h5要直接拨打电话可以写成拨打，但通过原生webview打开发现不好使。
问题原因在于原生把tel:当成了协议去处理，但之前有没有约定这样的协议，就会报错。解决办法：1、原生监听到tel:这种协议做一下处理，调起原生的拨打电话即可。2、h5拨打电话时和原生约定一个接口，直接调用原生暴露出来的方法，不用tel:这种写法。
5、chrome下最小字体限制12px
chrome下设置字体样式时小于12px时并不生效，这个时候呢在chrome27之前可以设置
-webkit-text-size-adjust: none;来解决。但是chrome27往后这样设置并不管用，需要用到css3里面的缩放来处理。比如我要设置字体大小位9px,就可以用如下代码实现
font-size: 0.12rem;transform: scale(0.75);需要注意的是transform: scale(0.75);把整体都缩了，原来的长宽等属性也需要响应的变化。
