网站技能培训机构,汕头建站费用,界面设计工具,文字游戏做的最好的网站文章目录 CSS 样式1、Chrome 89 版本期不再支持 /deep/#xff0c;请勿使用嵌套 /deep/2、圆角按钮 button 点击后出现矩形框线3、怪异模式4、border 1 像素在手机上显示问题5、文本溢出问题 JavaScript 脚本1、移动端点击穿透2、使用parseInt时必须补全第二个参数 radix3、有… 文章目录 CSS 样式1、Chrome 89 版本期不再支持 /deep/请勿使用嵌套 /deep/2、圆角按钮 button 点击后出现矩形框线3、怪异模式4、border 1 像素在手机上显示问题5、文本溢出问题 JavaScript 脚本1、移动端点击穿透2、使用parseInt时必须补全第二个参数 radix3、有关Input标签capture属性4、setTimeout/setInterval函数第一个参数误用字符串5、在为变量重置get、valueOf、toString时请谨慎7、null是不是object8、诡异的参数 CSS 样式
1、Chrome 89 版本期不再支持 /deep/请勿使用嵌套 /deep/
发现使用 chrome 最新版v89有个别样式出现了问题排查定位后发现是有些错误地嵌套使用/deep/在 v88 下是没问题的但在 v89 下就出现了问题不再生效。我们使用 VUE 框架ElementUI 组件库Dialog 控件样式(SCSS)写成了
.my-dialog {/deep/ .el-dialog {/deep/ .el-dialog__body {height: 600px;}}
}✨注意嵌套使用/deep/是错误的但在之前的版本没有发现问题便没发现✨ chromestatus chromestatu里有 The /deep/ combinator was a part of Shadow DOM v0, which has been deprecated and removed. Starting in M63, the /deep/ combinator was treated as a no-op, equivalent to a space “ “ combinator. As the code for all of Shadow DOM v0 was removed completely in M89, /deep/ will now throw exceptions in some JS operations, such as querySelectorAll. Simply replace it with “ “ to get pre-M89 behavior back. 翻译过来的意思是在 89 之前chrome 浏览器会将/deep/ 当作空格字符串来处理后面就完整删除 Shadow DOM v0 的内容了。 2、圆角按钮 button 点击后出现矩形框线
解决办法
outline: none;3、怪异模式
没有书写!doctype html时会触发怪异解析现象。
解决办法 请完整书写!doctype html 4、border 1 像素在手机上显示问题
原因 1px在手机上是使用2dp进行渲染换成 border: 0.5 是不行的
解决办法 通过给元素的before或after伪类设置border或者height然后让伪类利用 css3 的transform的scaleY(0.5)缩放 0.5 像素 5、文本溢出问题
单行文本溢出
overflow: hidden;
white-wrap: nowrap;
text-overflow: ellipsis;多行文本溢出
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
/* 3表示第四行溢出 */
-webkit-line-clamp: 3;JavaScript 脚本
1、移动端点击穿透
背景 当点击绝对定位元素的时候下面的元素虽然被遮盖但也被触发了。
原因 touchstart 早于 touchend 早于 click。
解决办法
1尽量都使用 touch 事件来替换 click 事件。例如用 touchend 事件(推荐)。2用 fastclick3用 preventDefault 阻止 a 标签的 click4延迟一定的时间(300ms)来处理事件 不推荐5以上一般都能解决实在不行就换成 click 事件。 2、使用parseInt时必须补全第二个参数 radix 参考文档parseInt 3、有关Input标签capture属性
HTML5 官方文档解释capture 属性用于调用设备的摄像头或麦克风。
当acceptaudio/*或者acceptvideo/*时capture只有以下两种值
值描述user调用面向用户的摄像头前置摄像头和/或麦克风environment调用朝外的摄像头后置摄像头和/或麦克风
iOS 最遵守遵守 HTML5 规范其次是 X5 内核安卓的 webview 基本忽略了 capture。
理想情况下应该按照如下开发 webview
(1). 当 acceptimage/*时captureuser调用前置照相机capture其他值调用后置照相机(2). 当 acceptvideo/\*时captureuser调用前置录像机capture其他值调用后置录像机(3). 当 acceptimage/_,video/_captureuser调用前置摄像头capture其他值调用后置摄像头默认照相可切换录像(4). 当 acceptaudio/*时capture放空或者任意值调用录音机(5). 当 input 没有 capture 时根据 accppt 类型给出文件夹选项以及摄像头或者录音机选项(6). input 含有 multiple 时访问文件夹可勾选多文件调用系统摄像头或者录音机都只是单文件(7). 无 multiple 时都只能单文件 参考文档
https://w3c.github.io/html-media-capture/https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capturehttps://caniuse.com/html-media-capturehttps://w3c.github.io/html-media-capture/#exampleshttps://stackoverflow.com/questions/21523544/html-file-input-control-with-capture-and-accept-attributes-works-wrong 4、setTimeout/setInterval函数第一个参数误用字符串
原因 如果你将一个字符串作为setTimeout/setTimeInterval它会被传给函数构造函数并构建一个新的函数。该操作流程很慢而且低效并导致 bug 出现。
解决办法 传入函数作为参数
function loop() {/* skip */
}
setInterval(loop, 1000);5、在为变量重置get、valueOf、toString时请谨慎
原因 考虑以下这些情况:
v 1 v 2如果重置v的 get 方法这种情况将成立
let i 1;
Object.defineProperty(window, v, {get() {return i;}
});console.log(v 1 v 2); // truev 1 v 2, 如果重置v的valueOf方法这种情况将成立
let v {i: 0,valueOf() {return (this.i 1);}
};
console.log(v 1 v 2); // true7、null是不是object
console.log(typeof null); // object
console.log(null instanceof Object); // false
console.log(Object.prototype.toString.call(null)); // [object Null]8、诡异的参数
function hello(name) {console.log(arguments[0]); // vickyname world;return Hello, arguments[0] !;
}console.log(hello(Rodey)); // Hello, world!原因 name形参并非是arguments类数组对象元素的引用。
