最近在做一个h5推广页面,修修改改,总是有很多的小问题,还是归于自己不细心,还有一点就是有一些css3的属性不太熟悉。跟后端程序猿对接的时候,导致各种打包?。挺不好的。
所以以后改东西,改完要认真仔细的过一遍。再跟人家说要发包。
//错误版
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
// 后面的几行是新加的
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-appearance: none;
outline: none;
}
//正确版
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
outline: none;
}
*:not(input,textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
-webkit-tap-highlight-color
这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。
-webkit-touch-callout
当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
user-select
(1) 语法
user-select:none | text | all | element
默认值:text
适用范围:除替换元素外的所有元素
(2) 取值说明
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。
Element:可以选择文本,但选择范围受元素边界的约束
-webkit-appearance
ios系统input默认灰色的背景;
另外:触屏是没有鼠标的,只有触摸事件,所以要模仿pc端hover事件,移动端可以用:active 来代替,但是会有一些bug 所以要加上一段js
document.body.addEventListener(‘touchstart’, function () { });