css - Firefox 设置了错误的插入符号位置 contentEditable with :before

Question

playground

这是我的问题的简化版本。
似乎我无法将定位的伪元素放在 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>

更新 - 发现报告的错误:

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

Answer 1

将:after 元素设置为absolute 时会出现问题。我不明白为什么。但如果你只是将它相对放置，问题就消失了。

我已经更新了你的 fiddle :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 元素的文本后面。这就是为什么你想要它绝对。有趣的是:如果将伪元素放在 float: left; 上，它会显示与 position:absolute; 相同的行为。

更新

当你被迫在伪元素上使用绝对时，目前似乎只有一种解决方案。为框定义另一个填充，只要它是空的并且有焦点。 Playground :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"
    }   
}