我输入的占位符文本在Firefox和Chrome桌面中正确垂直对齐.但是在Safari桌面以及Firefox Mobile,Chrome Mobile和Safari Mobile上,文本太高了.
我已经尝试过使用padding和line-height,但是还无法解决.
这是代码-在移动设备上查看以查看问题:
https://codepen.io/paulspelman/pen/XGvVrE
@H_403_12@* { -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; }
@H_403_12@<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>
最佳答案