鉻和Firefox的不同顯示

Question

我有這個樣式表，我的數字必須在文本框中垂直居中，在Firefox中也可以，但是在chrome中它顯示出與眾不同

 *{ box-sizing: border-box } html{ font-size: 13px; } body{ direction: rtl; } html, body, div, span{ margin: 0; } .textContainer{ position: relative; } .textBox{ padding: 0 0 0 45px; height: 40px; width: 100%; direction: ltr; } .mobile-number{ background: url(phone.png) no-repeat scroll 7px center; padding: 0 0 0 46px; position: absolute; left: 0; line-height: 42px; width: 10px; } 

 <div class="textContainer"> <input type="text" class="textBox"/> <span class="mobile-number">09</span> </div> 

Answer 1

 *{ box-sizing: border-box } html{ font-size: 13px; } body{ direction: rtl; } html, body, div, span{ margin: 0; } .textContainer{ position: relative; } .textBox{ padding: 0 0 0 45px; height: 40px; width: 100%; direction: ltr; } .mobile-number{ background: url(phone.png) no-repeat scroll 7px center; padding: 0 0 0 46px; position: absolute; left: 0; line-height: 42px; width: 10px; top:0 } 

 <div class="textContainer"> <input type="text" class="textBox"/> <span class="mobile-number">09</span> </div> 

干得好

firefox可以在position:absolute之后默認設置Top:0 ，而chrome在設置為top:0之前不會做同樣的事情

因此只需添加.mobile-number{top:0}您的問題就會得到解決