小坑记录，专治八阿哥

1.iphone5 flex不生效，父元素display为flex,子元素如果是行内元素设置样式  flex为1样式不生效。要把行内元素改为块级元素才可生效。比如行内元素是a改为div即可。实例如下：

原代码 

页签1页签2

 .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;}
}

正确代码：

页签1页签2

 .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做了实验）

33333333333333

方法1，通过样式，主要用到user-select，兼容性如下

但据我测试结果input除了火狐浏览器可以，ie,chrome,safari都无效，safari甚至有副作用，input都不能输入了。IE浏览器本身PC端user-select只兼容到IE10，所以只靠这个样式并不能完美解决，代码如下

33333333333333

方法2，通过js,给元素添加onselectstart事件，并返回false。该方法真机ie9可以兼容，模拟ie8也没问题。除了chrome input元素有问题，以及safari不能输入，其他浏览器均表现完美。代码如下

33333333333333

最终方案，safari浏览器比较特殊，input不能加user-select：none;样式，否则，不可编辑。总不能为了禁用选中不让编辑了吧，最后只能把这个样式去掉，或者改为user-select：text; -khtml-user-select:none 样式也要去掉，否则safari下input也不可编辑。那么最终方案如下：（遗憾的的是safari和chrome下input还有选中样式，有方案的同学可留兰）

33333333333333

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; /*透明度*/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！