html - 火狐 :before ignores positions

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;
}

我用 fiddle 复制了它，我希望有人以前遇到过这个问题并且能够帮助我。

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