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可以在Top:0之后默认设置position:absolute，而Chrome在设置为top:0之前不会执行相同操作

所以只需添加.mobile-number{top:0}，您的问题就会得到解决

chrome和firefox中的不同显示

1 个答案: