-
-
问题:z-index属性失效的问题其实原理也很简单,就是利用了z-index的覆盖问题,在写的过程中我发现无论怎么改变,insert的z-index总是无效的,于是百度了一下z-index无效的情况,一共有三种:
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了,他的解决办法有是三个:
1、position:relative改为position:absolute;
2、浮动元素添加position属性(如relative,absolute等);
3、去除浮动。所以,去掉parent的position和z-index,达到了我想要的效果,如下图所示:
问题1:input框在手机上ios会出现有阴影的效果,如果去掉可使用上面样式,安卓也有
input:-webkit-autofill,select:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
input {
outline-color: invert;
outline-style: none;
outline- 0px;
border: none;
border-style: none;
text-shadow: none;
-webkit-appearance: none;
-webkit-user-select: text;
outline-color: transparent;
box-shadow: none;
}
问题1:input框在手机上ios会出现有阴影的效果,如果去掉可使用上面样式,安卓也有
问题2:input框border-radus这个样式,如果设置了值只设置两个角的值,但在ios手机它会四个角都是圆的,所以要再设置不想让其是圆角的值为0px即可
二、读fastclick源码可以学到的东西-
//不支持用于模拟的touchstart事件,无法模拟
if (typeof window.ontouchstart === 'undefined') {return true;
}
// 探测chome浏览器
chromeVersion = +(/Chrome/([0-9]+)/.exec(navigator.userAgent) || [, 0])[1];if (chromeVersion) {
//安卓设备
if (deviceIsAndroid) {metaViewport = document.querySelector('meta[name=viewport]');
if (metaViewport) {
// 安卓下,带有 user-scalable="no" 的 meta 标签的 chrome 是会自动禁用 300ms 延迟的,无需 FastClick
if (metaViewport.content.indexOf('user-scalable=no') !== -1) {return true;
}
//chome32以上带有 width=device-width的meta标签的也唔需要使用FastClick
if (chromeVersion > 31 && document.documentElement.scrollWidth <= window.outerWidth) {return true;
}
}
// 桌面设备自然无需使用
} else {return true;
}
}
-