Question

我的输入包含:before标记中定义的一些内容。在IE和Chrome中，它的工作非常完美，但Firefox却让它变得一团糟。

内容应该在输入标记中可见，但在Firefox中，内容在input-group-addon中可见。

我的HTML：

<div class="col-sm-6">
  <div class="input-group">
     <div class="iban">
        <input type="text" name="iban" class="form-control text-uppercase">
     </div>

     <div class="input-group-addon">
        <span class="glyphicon"></span>
     </div>
  </div>
</div>

我的CSS：

.iban:before {
  content: 'CH';
  color: #999;
  position:absolute;
  padding-left:7px;
  padding-top:7px;
  z-index:1000;
}

.iban > input {
  padding-left:29px;
}

我在小提琴中复制了它，我希望之前有人能够解决这个问题并且能够帮助我。

https://jsfiddle.net/9wme1roo/3/

Answer 1

您尚未为伪元素指定任何位置值。

.iban:before {
  content: 'CH';
  left: 0; /* add this */
  color: #999;
  position:absolute;
  padding-left:7px;
  padding-top:7px;
  z-index:1000;
}

JSFiddle Demo

Firefox：忽略位置之前

1 个答案: