[英]diffrent display in chrome and firefox
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 我有这个样式表,我的数字必须在文本框中垂直居中,在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>
*{ 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
firefox可以在
position:absolute
之后默认设置Top:0
,而chrome在设置为top:0
之前不会做同样的事情
so just by adding .mobile-number{top:0}
your issue will get fixed 因此只需添加
.mobile-number{top:0}
您的问题就会得到解决
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.