Firefox设置错误的插入位置contentEditable with:before

Question

操场

这是我的问题的简化版本.
似乎我无法在contentEditable中放置一个定位的伪元素,但在单击以获得焦点在contentEditable元素上时,插入符号位于正确的位置.

div{ padding:10px; border:1px solid #CCC; height:120px; position:relative; }

div::before{ 
  position:absolute; 
  top:10px; 
  left:10px; 
  content:"placeholder"; 
  color:#AAA; 
  transition:.2s;
  opacity:0;
}

div:empty::before{
  opacity:1;
}

<div contentEditable></div>

更新 - 发现报告的BUG:

请投票支持修复此错误 - https://bugzilla.mozilla.org/show_bug.cgi?id=904846

Answer 1

将:after元素置于绝对值时会出现问题.我无法弄清楚为什么.但如果你把它放在相对位置,问题就消失了.

我已经更新了你的小提琴:http://jsfiddle.net/NicoO/Lt3Wb/1/

这是新的CSS(有一些实验性补充)

$pad:10px;

div{ 
    padding:$pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 

 &:before
 { 
     position:relative;
     color:#999;
     content:"Write a comment..."; 
 }   
}

div:focus
{
    border-color: red;
}

div:not(:empty):before{
    display: none;
}

剩下的唯一问题是,您可以专注于:before元素的文本.这就是为什么你想要绝对的原因.Interessting:如果你把伪元素放在float: left;它上面显示与on相同的行为position:absolute;.

更新

当你被迫在伪元素上使用绝对值时,目前似乎只有一种解决方案.为盒子定义另一个填充,只要它是空的并且是聚焦的.游乐场:http://jsfiddle.net/NicoO/Lt3Wb/5/

$pad:10px;
#test
{ 
    padding: $pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    

    &:empty:focus
    {
        padding: #{($pad*2)+6} $pad; 
    }

    &:before 
    { 
        position:absolute;
        color:#999;
        top: $pad;
        left: $pad;
        content: "Leave a comment"
    }   
}