html-如何在桌面设备和移动设备之间修复不一致的占位符文本垂直对齐方式?

前端之家收集整理的这篇文章主要介绍了html-如何在桌面设备和移动设备之间修复不一致的占位符文本垂直对齐方式? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我输入的占位符文本在Firefox和Chrome桌面中正确垂直对齐.但是在Safari桌面以及Firefox Mobile,Chrome Mobile和Safari Mobile上,文本太高了.

我已经尝试过使用padding和line-height,但是还无法解决.

这是代码-在移动设备上查看以查看问题:

https://codepen.io/paulspelman/pen/XGvVrE

  1. * {
  2. -webkit-Box-sizing: border-Box;
  3. Box-sizing: border-Box;
  4. }
  5. body {
  6. padding: 0;
  7. margin: 0;
  8. color: #00bb80;
  9. background: #101010;
  10. }
  11. .wrapper {
  12. display: -webkit-Box;
  13. display: -ms-flexBox;
  14. display: flex;
  15. -webkit-Box-orient: vertical;
  16. -webkit-Box-direction: normal;
  17. -ms-flex-direction: column;
  18. flex-direction: column;
  19. -webkit-Box-pack: center;
  20. -ms-flex-pack: center;
  21. justify-content: center;
  22. width: 100vw;
  23. height: 100vh;
  24. margin: 0 auto;
  25. max-width: 900px;
  26. font-family: sans-serif;
  27. text-align: center;
  28. width: 70%;
  29. }
  30. .input-holder {
  31. position: relative;
  32. display: -webkit-Box;
  33. display: -ms-flexBox;
  34. display: flex;
  35. -webkit-Box-pack: center;
  36. -ms-flex-pack: center;
  37. justify-content: center;
  38. -webkit-Box-align: center;
  39. -ms-flex-align: center;
  40. align-items: center;
  41. height: 4rem;
  42. margin: 0 auto 2rem auto;
  43. }
  44. input {
  45. height: 4rem;
  46. width: 12rem;
  47. font-size: 2rem;
  48. font-weight: 300;
  49. text-align: left;
  50. padding: 0 0 0.2rem 1rem;
  51. margin-left: 0.5rem;
  52. color: #9b9b9b;
  53. background: #101010;
  54. border: 1px solid #434343;
  55. border-right: 0;
  56. border-radius: 0;
  57. }
  58. input::-webkit-input-placeholder {
  59. font-size: 1.1rem;
  60. font-weight: 400;
  61. position: relative;
  62. top: -0.3rem;
  63. color: #9b9b9b;
  64. }
  65. input:-ms-input-placeholder {
  66. font-size: 1.1rem;
  67. font-weight: 400;
  68. position: relative;
  69. top: -0.3rem;
  70. color: #9b9b9b;
  71. }
  72. input::-ms-input-placeholder {
  73. font-size: 1.1rem;
  74. font-weight: 400;
  75. position: relative;
  76. top: -0.3rem;
  77. color: #9b9b9b;
  78. }
  79. input::placeholder {
  80. font-size: 1.1rem;
  81. font-weight: 400;
  82. position: relative;
  83. top: -0.3rem;
  84. color: #9b9b9b;
  85. }
  86. .dollar-sign {
  87. color: #9b9b9b;
  88. font-size: 2rem;
  89. font-weight: 300;
  90. margin: 0;
  91. padding-bottom: 0.4rem;
  92. }
  93. button {
  94. height: 4rem;
  95. font-size: 1.5rem;
  96. width: 4rem;
  97. font-weight: 400;
  98. text-align: center;
  99. background-color: #797979;
  100. color: #101010;
  101. border: 0;
  102. padding: 0;
  103. }
  1. <div class="wrapper">
  2. <div class="input-holder">
  3. <p class="dollar-sign">$</p>
  4. <input type="text" class="user-input" placeholder=" Placeholder text" maxlength="4" value="" autocomplete="off">
  5. <button class="calculate-button">&rarr;</button>
  6. </div>
  7. </div>
最佳答案
有一个小的hack可以修复它.您需要指定:

  1. @supports(font-synthesis: inherit) { // not supported by Chrome but supported by Safari
  2. input::placeholder {
  3. line-height:3em
  4. }
  5. }

Demo

猜你在找的HTML相关文章