diffrent display in chrome and firefox

Question

I have this stylesheet that my number has to be vertically center in textbox and it is okay in firefox but in chrome it shows me different

 *{ 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> 

Here you Go

firefox as the ability to set Top:0 by default after position:absolute while chrome doesn't do the same until the value is set to top:0

so just by adding .mobile-number{top:0} your issue will get fixed