Q1:设置背景色和边框不生效 — 非必然事件
这个问题拿几部真机测试,发现是 IOS16+ 专有问题。且不是所有的H5页面都有问题。
原因:元素设置了border-radius,背景和边框可能不展示。
A1:去掉border-radius。可以用图片代替(用图片代替,这个方案很呆)
A2:给当前元素添加两行样式
transform: matrix3d(0,0,0);
will-change: transform;
A3:给父元素添加样式
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
Q2:<input> disabled时,整个文本框很模糊
原因:ios默认了disabled属性时透明度为0.3
A1:disabled时,透明度设为1即可
input:disabled, textarea:diabled {
opacity: 1;
}
补充说明:在reset input:disabled的地方,一般还有两行代码
input:disabled, textarea:diabled { color: #ccc; -webkit-text-fill-color: #ccc; }
-webkit-text-fill-color 指定了文本字符的填充颜色。若未设置此属性,则使用 color 属性的值。
- 同时设置了-webkit-text-fill-color和color,color失效。
- 设置了-webkit-text-fill-color,input的value和placeholder颜色都是该值。
- color只是value的颜色值,并不适用placeholder。
A2:用readonly属性替代disabled
我自己很少用readonly,也不推荐使用。主要是因为如下副作用:
- readonly可以获取焦点,虽然没有弹起键盘,但是底部出现一个键盘的bar条【左边是上下箭头,右边是完成按钮】。如图:
这时需要处理input,禁止光标进入(可使用下面代码)。input:read-only { pointer-events: none; }
- :read-only选择器不只是选择具有 readonly 属性的<input> 元素,也会选择所有的不能被用户编辑的元素。input disabled时,:read-only选择器设置的样式同样生效。
<!--html--> <input type="text" value="readonly" readonly><!--input1--><br> <input type="text" value="disabled" disabled><!--input2--><br> /*CSS*/ input:disabled {/*样式1*/ color: red; } input:read-only {/*样式2*/ color: green; } <!-- 结果:input1、input2的value值都是绿色 input1:匹配样式2 input2:匹配样式1和样式2。但样式2后设置,所以样式2生效 -->
Q3:input/textarea 不能输入
原因:CSS reset中代码,通配选择器 (*)的下面一行代码
* {
-webkit-user-select:none;
-moz-user-select:none;
/*-khtml-user-select:none;*/
-ms-user-select:none;
user-select:none;
}
- user-select:用于控制用户是否可以选择文本
- -khtml-前缀,是为了兼容早期Safari 浏览器,可以追溯到Safari2。-webkit-前缀自 Safari 3 以来一直存在。几乎不存在的东西,可以忽略。用-webkit-即可。
A:input / textarea 添加如下代码
input, textarea {
-webkit-user-select:auto;
}
Q4:链接或可点击元素,去掉被点击后,默认的灰色背景色
灰色背景效果如:
A:
html {
/*-webkit-tap-highlight-color 是个继承属性,所以放在html元素上设置*/
-webkit-tap-highlight-color: transparent;
}
Q5:去掉<button>默认样式?
button {
-webkit-appearance: none;
}
-webkit-appearance 属性设置为 none ,来禁用 iPhone 中<button>元素的内置样式。
Q6:-webkit-font-smoothing: antialiased;?
font-smooth CSS 属性控制字体渲染时应用的抗锯齿效果。Webkit 实现了名为 -webkit-font-smoothing 的相似属性。该属性仅适用于 macOS。
- auto——由浏览器决定(如果可用,则使用亚像素抗锯齿;这是默认值)。
- none——关闭字体平滑;显示带有锯齿边缘的文本。
- antialiased——在像素(而不是亚像素)级别平滑字体。对于深色背景上的浅色文本,从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
- subpixel-antialiased——在大多数非视网膜显示器上,这将会提供最清晰的文本。
font-smooth具有继承性,可以放在body元素上设置。
antialiased比auto的字体看起来更细一些。
<p>Without font smoothing</p>
<p class="smoothed">With font smoothing</p>
.smoothed {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
浏览器效果截图:
The end.