IE9 - 内部div为绝对且外部div相对定位时div内部不需要的填充

Question

我一直在IE上与这个问题进行了长达6个小时的斗争。当我们使用before标签时，似乎有额外的填充，其中position是绝对的。

CSS

.rteEditable{
  background-color:green;
  position: relative;
  width: 200px;
  height: 400px;
  min-height: 400px;
}
.rteEditable p{
  padding-left: 46px;
}

.rteEditable:before{
  position: absolute; 
  height: 100%;
  width: 40px;
  content:'';
  background-color:red;
}

HTML

<div class="rteEditable" contenteditable="true">
<p>
HELLO THIS IS A TEAST
</p>
</div>

我写的代码JSFiddle

以下是图片以便更好地解释。

Chrome

IE9

Answer 1

请参阅https://jsfiddle.net/evouvj7v/

添加

left: 0;
right: 0;
top: 0;
bottom: 0;