1

我正在制作一个富 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 中的突出错误。

4

1 回答 1

1

已将此作为 Firefox 中的错误提交。感谢 mozilla 的 IRC 上的人的帮助，他们在主干上重现了这个错误并确定它是否是一个错误。

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

于 2013-04-26T00:34:52.397 回答