铬和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}您的问题就会得到解决