踩坑记录（开发中的一些坑）

踩坑：在移动端中盒子或者按钮按住时候会有一个正方形阴影

div {
//该属性能够设置点击链接的时候出现的高亮颜色 将其设置为透明色就ok好了
  -webkit-tap-highlight-color: transparent;
}

踩坑：icon字体图片与文字对不齐

方法一：可以使用 position:relative 相对定位改变top值进行对齐

方法二：

//父元素设置
.par_box{
    display: table;
}

//子元素设置

.child{
    vertical-align: middle;
    display: table-cell;
}

方法三：使用自身偏移

//向上偏移一点
transform: translate(0, 10%);
//向下偏移一点
transform: translate(0, -10%);

踩坑：获取html跟节点的字体大小（可能会用于计算页面的rem值）

getComputedStyle(window.document.documentElement)['font-size']

踩坑：PC的input输入框 type=number 时候隐藏右边的上下加减箭头

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0;
  }
  input[type="number"]{-moz-appearance:textfield;}

踩坑：禁止长按出现复制

现在很多App都是用的Web+App 或者H5打包的页面所以在某些<li>标签的单击事件中长按会调用系统默认的事件

解决这种情况只需要在<body>标签中添加以下代码：

oncontextmenu='return false' 禁止右键

ondragstart='return false' 禁止拖动

onselectstart ='return false' 禁止选中

onselect='document.selection.empty()' 禁止选中

oncopy='document.selection.empty()' 禁止复制

onbeforecopy='return false' 禁止复制

onmouseup='document.selection.empty()'

<body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>

</body>

contenteditable

该属性会使标签会变成可编辑状态一般用于富文本

<div contenteditable="true"></div>

calc

这是一个 css 属性，可以计算 css 的值。可以计算不同单位的差值。

div {
    width: calc(100% - 50px);
}

解析连接 url

可以通过创建 a 标签，将url赋值到a标签的 href 属性上，可以获取到协议，pathname，origin 等 location 对象上的属性

// 创建a标签
const aa = document.createElement('a');
// 给a标签赋值href路径
aa.href = '/ddddb.php';
// 访问aEle中的属性
aa.protocol; // 获取协议
aa.pathname; // 获取path
aa.origin;
aa.host;
aa.search;

本文最后更新于2019-9-24，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！