90%的前端都会踩的坑，你中了吗？
1、父元素设置了border-radius，子元素应用了transform，并且父元素设置了overflow:hidden，但是却失效？ 给父元素设置 { posit
1、父元素设置了border-radius，子元素应用了transform，并且父元素设置了overflow:hidden，但是却失效？
// 给父元素设置
{
position:relative;
z-index:1;
}
2、设置input 文本框的 placeholder 的颜色
input::-webkit-input-placeholder{
color:rgba(144,147,153,1);
}
3、如何设置body背景色，height:100%,不生效？
同时设置html，body的高度
html,body{
height:100%；
}
或
body{
height: 100vh; // 代表占屏幕100%
}
4、一像素边框的问题
.row {
position: relative;
&:after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 200%;
border-bottom:1px solid #e6e6e6;
color: red;
height: 200%;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(0.5);
transform: scale(0.5);
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
}
}
5、css属性touch-action:none;
该属性会导致安卓页面无法滚动，慎用!
6、去除ios 手机端input输入框的内阴影
input{
-webkit-appearance: none;
}
7、安卓手机端div里面在包一层div，文字展示不居中的问题。
最好给div设置padding ，不固定高度和不设置line-height；
8、iOS端input输入框光标错位
是由于fixed定位引起的，改成absolute就解决了
.box{
position: absolute;
}
9、div实现背景色和背景图片同时存在
{
background-color: #fff;
background-image:url('../../assets/img/model-bg.png');
background-repeat: no-repeat;
}
10、css 制作椭圆
border-radius可以单独设置水平和垂直的半径，只需要用一个斜杠（/）分隔这二个值就行。
此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。
{
width: 150px;
height: 100px;
border-radius: 50%/50%; //简写属性：border-radius:50%
background: brown;
}
11、图片居中显示
object-fit: cover;
兼容问题
1、iconfont 字体在钉钉应用里面加载不出来（或者是乱码）的问题引入iconfont字体的时候，需要按照顺序把字体依次引入。正确的顺序如下：
@font-face {
font-family: "djicon";
src: url('./iconfont.eot'); /* IE9*/
src: url('./iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */
url('./iconfont.woff') format('woff'), /* chrome、firefox */
url('./iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
// 参考文档：https://www.cnblogs.com/Megasu/p/4305116.html
2、PC端ueditor 编辑的文案及图片拉伸问题，背景是 后端返回是html片段
node - cheerio模块，操作dom字符串比较方便，实际案例：
解决了 PC端图片在移动端展示的问题参考文档：
www.jianshu.com/p/e6d73d8fa…
www.npmjs.com/package/che…
width: number = 784 代表pc端宽度
regHtml(str: string){
// 参数是html片段
let _this = this;
const $ = cheerio.load(str);
$('img').each(function(index,element){
let attr = element.attribs //元素的属性
// 屏幕宽度
let docEl = document.documentElement
let clientWidth = docEl.clientWidth
if(attr.width){ //如果设置了宽
// 图片宽度/屏幕宽度的比例
let rate = attr.width /_this.width
//图片的宽高比例
let wh = attr.width/attr.height
$(element).attr('height', _this.rate*clientWidth/wh)
$(element).attr('width', _this.rate*clientWidth)
$(element).attr('style', '')
$(element).attr('class', 'img-skew')
}
})
return $.html()
}
3、IOS 点击input不聚焦问题。
ios系统中点击Input输入框，没有反应，无法聚集光标，调不起键盘。
解决方案：强制性给加上点击事件，点击后给input框聚集光标。
cilckTextarea(){
document.getElementsByClassName('cont-inp')[0].focus();
},
4、上传图片，iPhone7 iPhone7p在上传图片的时候，传不过去图片的name
解决方案：手动添加图片name
let data = new FormData();
data.append("fileName", file[0],file[0].name);
5、ios微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位
解决方案：手动把滚动条滚到底部写一个自定义指令。
import Vue from 'vue';
Vue.directive('blur', {
'bind'(el) {
el.addEventListener("click", function(){
window.scrollTo(0,0);
})
}
});
//在点击页面提交按钮的时候，把滚动条滚到底部就OK了
6、微信浏览器调整字体后，页面错位。
解决方案：阻止页面字体自动调整大小
// 安卓：
(function() {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
//IE浏览器，非W3C规范
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})();
//iOS：
// ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;}
7、关于移动端样式兼容的问题
- 设置meta标签viewport属性，使其无视设备的真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率，从而达到能有统一的分辨率的效果。并且禁止掉用户缩放
- 使用rem进行屏幕适配，设置好root元素的font-size大小，然后在开发的时候，所有与像素有关的布局统一换成rem单位。
8、iOS下取消input在输入的时候英文首字母的默认大写
<input type="text" autocapitalize="none">
9、禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no" />
10、禁止ios和android用户选中文字
-webkit-user-select: none;
11、一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发
只需要对不触发click事件的元素添加一行css代码即可：
cursor: pointer;
调试工具
1、Weinre远程调试工具
简单的步骤：
- 本地全局安装weinre , 命令行：npm install -g weinre
- 在本地启动一个检测器：weinre --boundHost 1.2.3.4 （IP为本地IP地址）
- 在浏览器访问此地址：http://1.2.3.4:8080
- 把下面这一串东西，放在你需要调试的页面里： <script src="http://1.2.3.4:8080/target/target-script-min.js#anonymous"></script>
- 点击链接打开：http://1.2.3.4:8080/client/#anonymous
2、vconsole 日志打印
import VConsole from 'vconsole'
var vConsole = new VConsole();
3、fiddler抓包也需要支持https
解决方案：fiddler需要安装信任证书，手机也需要安装信任证书，在浏览器里面打开
http://1.2.3.4:8888 // 本地IP地址+端口号
4、charles 手机端抓包，需要安装证书
手机浏览器输入：chls.pro/ssl ，去下载证书。
手机-设置-安全与隐私-更多安全下载-从sd卡安装证书 - 找到之前在浏览器下载的证书
vue相关问题
1、vue 如何获取拉回数据后图片的高度？
<img
:src="userInfo.profilePicture"
alt
class="img-picture"
v-if="userInfo.profilePicture"
ref="myImg"
@load="imageFn"
>
imageFn() {
console.log(this.$refs.myImg.offsetHeight);
console.log(this.$refs.myImg.offsetWidth);
},
2、vue中同一个dom节点，v-if与v-for不推荐同时使用，官方解答：
不推荐同时使用 v-if 和 v-for。 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
3、vue v-for 中更改item 属性值后，v-show不生效的问题
添加this.$forceUpdate();进行强制渲染，效果实现。
因为数据层次太多，render函数没有自动更新，需手动强制刷新。
4、这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
beforeRouteLeave(to, from, next) {
if (to.path === '/votes/subject') {
next('/task-list');
} else {
next();
}
}
5、element UI 自定义传参的解决方法
这里的handleSelect默认绑定的参数是选中的那条数据。如果一个页面有好几个相同的组件，要想知道选的是哪个？
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
解决方案：
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="((item)=>{handleSelect(item, index)})"
// 写个闭包就可以了，index表示第几个组件
></el-autocomplete>
6、element-UI 框架 el-input 触发不了 @key.enter事件
<el-input v-model="form.loginName"
placeholder="账号"
@keyup.enter="doLogin">
</el-input>
解决方案：使用@key.center.native
<el-input v-model="form.loginName"
placeholder="账号"
@keyup.enter.native="doLogin">
</el-input>
