css - IE9 - 当内部 div 是绝对的而外部 div 是相对定位时，div 内部不需要的填充

Question

我已经在 IE 上与这个问题斗争了整整 6 个小时。当我们使用带有绝对位置的 before 标签时，似乎有额外的填充。

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;