Question

我正在创建一个丰富的Web客户端，您可以在其中为演示文稿创建幻灯片。其中一项功能是能够缩放页面以适应屏幕。我使用CSS转换来实现这一点，并在小型笔记本电脑屏幕上缩小。但是，我的contentEditable文本框在这些情况下开始失去闪烁的插入符号（它从0.7开始，随着缩小的越多越好）。

查看这个简化的案例：

<!DOCTYPE html>
<html><head>
<style type="text/css">
div {
    border: 1px solid gray;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
}
</style>
</head><body>
<div contenteditable="true">The quick brown fox jumps over the lazy dog</div>
</body></html>

或者在jsfiddle：http://jsfiddle.net/5wJGg/3/

单击最左侧的字符，然后使用键盘的右箭头键浏览所有字符 - 每次等待插入符号闪烁。

谷歌浏览器：插入标签始终显示。
Firefox 20：某些字符之间没有插入符号。
IE 9：插入符号不会出现在某些字符之间。
IE 10：插入符总是出现。
Safari（在mac上）：插入符号始终显示

我注意到有时Google Chrome / Safari会以2px宽度灰色绘制插入符号。

这是Firefox和IE中的子像素渲染错误吗？有解决方法吗？我不能用CSS设置插入符号，所以我担心我可能是SOL。

[编辑] 刚刚在Windows 8上的IE 10上进行了测试。插入总是出现。当出现子像素问题时，插入符号显示为较粗且灰色，因此它看起来像IE 9中已修复的错误，并且是Firefox中的一个突出错误。

Answer 1

已将此归档为Firefox中的错误。感谢mozilla的IRC上的人们帮助在主干上重现这个bug并弄清楚它是否是一个bug。

https://bugzilla.mozilla.org/show_bug.cgi?id=865930

为什么contentEditable的插入符号在Firefox，IE缩小时会消失？

1 个答案: