踩坑记录 (开发中的一些坑)

作者: 小枫枫

临枫的项目经历分享给你们啦~

扫码交朋友

标签:

特别声明:文章有少部分为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

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

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 属性上,可以获取到协议,pathnameoriginlocation 对象上的属性

 

// 创建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 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏

作者: 小枫枫, 转载或复制请以 超链接形式 并注明出处 小枫枫不疯喔
原文地址: 《踩坑记录 (开发中的一些坑)》 发布于2019-9-24

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏