小坑记录，专治八阿哥

最新推荐文章于 2021-11-30 19:20:24 发布

渔大侠

最新推荐文章于 2021-11-30 19:20:24 发布

阅读量296

点赞数

分类专栏：项目杂症

本文链接：https://blog.csdn.net/weixin_39678029/article/details/85264221

版权

项目杂症专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

渔大侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小坑记录，专治八阿哥

1.iphone5 flex不生效，父元素display为flex,子元素如果是行内元素设置样式 flex为1样式不生效。要把行内元素改为块级元素才可生效。比如行内元素是a改为div即可。实例如下：原代码 &lt;div class="title"&gt; &lt;a &gt;页签1&lt;/a&gt; &lt;a &gt;页签2&lt;/a&gt;&lt;/di..
复制链接

扫一扫