html - 如何修复桌面和移动设备之间不一致的占位符文本垂直对齐?
问题描述
我的输入占位符文本在 Firefox 和 Chrome 桌面中正确垂直对齐。但在 Safari 桌面版和 Firefox Mobile、Chrome Mobile 和 Safari Mobile 上,文本太高了。
我尝试过使用填充和行高,但无法解决它。
这是代码 - 在移动设备上查看它以查看问题:
https://codepen.io/paulspelman/pen/XGvVrE
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
color: #00bb80;
background: #101010;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100vw;
height: 100vh;
margin: 0 auto;
max-width: 900px;
font-family: sans-serif;
text-align: center;
width: 70%;
}
.input-holder {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 4rem;
margin: 0 auto 2rem auto;
}
input {
height: 4rem;
width: 12rem;
font-size: 2rem;
font-weight: 300;
text-align: left;
padding: 0 0 0.2rem 1rem;
margin-left: 0.5rem;
color: #9b9b9b;
background: #101010;
border: 1px solid #434343;
border-right: 0;
border-radius: 0;
}
input::-webkit-input-placeholder {
font-size: 1.1rem;
font-weight: 400;
position: relative;
top: -0.3rem;
color: #9b9b9b;
}
input:-ms-input-placeholder {
font-size: 1.1rem;
font-weight: 400;
position: relative;
top: -0.3rem;
color: #9b9b9b;
}
input::-ms-input-placeholder {
font-size: 1.1rem;
font-weight: 400;
position: relative;
top: -0.3rem;
color: #9b9b9b;
}
input::placeholder {
font-size: 1.1rem;
font-weight: 400;
position: relative;
top: -0.3rem;
color: #9b9b9b;
}
.dollar-sign {
color: #9b9b9b;
font-size: 2rem;
font-weight: 300;
margin: 0;
padding-bottom: 0.4rem;
}
button {
height: 4rem;
font-size: 1.5rem;
width: 4rem;
font-weight: 400;
text-align: center;
background-color: #797979;
color: #101010;
border: 0;
padding: 0;
}
<div class="wrapper">
<div class="input-holder">
<p class="dollar-sign">$</p>
<input type="text" class="user-input" placeholder=" Placeholder text" maxlength="4" value="" autocomplete="off">
<button class="calculate-button">→</button>
</div>
</div>
解决方案
有一个小技巧可以修复它。您需要指定:
@supports(font-synthesis: inherit) { // not supported by Chrome but supported by Safari
input::placeholder {
line-height:3em
}
}
推荐阅读
- mongodb - nodemon] 应用程序崩溃 - 启动前等待文件更改
- go - 使用日志包附加到当前行
- algorithm - 这种贪心算法能更高效吗?
- powershell - 要显示的 powershell 变量值的一部分
- sql - 在数据库的所有现有表中搜索数据
- python - 我有一个状态表,但我希望它每 10 分钟更改一次状态。我正在使用 Postgresql
- r - ifelse R中一系列列的多个OR条件
- javascript - 如果我使用一个端点监视另一个端点,这是不好的做法吗?
- python - 将 Python Ray 与 CPLEX 模型对象结合使用
- c++ - 如何查找向量的元素是否交替为符号?