ie8下文字框內文字垂直居中
阿新 • • 發佈：2019-01-25
今天測試又遇到了個ie8bug：
就是在ie8下設定了高度的input框內的文字不會自動垂直居中，而在其他瀏覽器及ie9+都正常，大家可以試一下.
解決方法就是像p標籤一樣設定一下行高，如：line-height: 40px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <script src="js/jquery-1.11.3.min.js"></script> <style> * {padding: 0; margin: 0;} .ctn {width: 300px; height: 80px; background: red;} input {border: 2px solid blue; width: 100%; height: 40px; box-sizing: border-box; margin-top: 21px;} p {height: 100px; background: green; line-height: 100px;} </style> <body> <div class="ctn"> <input type="text" value="一段測試文字" /> </div> <p> 這是另一段測試文字 </p> <script> $("body").css({"color":"red"}); </script> </body> </html>