jsfiddle 光标的明显位置不是它在 Chrome 和 IE 中的实际位置。在火狐中工作

Posted 2023-05-07

【中文标题】jsfiddle 光标的明显位置不是它在 Chrome 和 IE 中的实际位置。在火狐中工作

【英文标题】：The jsfiddle cursor's apparent position is not it's actual position in Chrome and IE. Works in Firefox

【发布时间】：2015-01-20 20:37:39

【问题描述】：

今天注意到，在较长的代码行或 cmets 中，光标逐渐变得越来越不正确，直到其明显位置偏离 3 个以上字符。 （这看起来编辑器认为它正在使用不同的字体。）

我在 Chrome 和 IE 中看到了这一点。但是 Firefox 运行良好。其他人看到了吗？

【问题讨论】：

我可以确认这种行为。使用最新版本的chrome（目前为39.0.2171.65）

是的，对我来说也是如此......我现在只是使用更多的 Plunker。

【参考方案1】：

希望他们修复它。关闭文本渲染：optimizeLegibility；在 body 元素中，你应该在此期间很好。

在 Chrome 中你可以这样做：

打开要编辑的小提琴 打开 chrome 控制台 (f12) 选择“元素”标签 选择“body”标签 将“样式”区域（右侧）向下滚动到“normalize.css” 最后取消选中“text-rendering: optimizeLegibility;”旁边的复选框

现在光标是固定的，直到您重新加载页面。

【讨论】：

如果你使用的是Styish，那么你可以使用这种样式：userstyles.org/styles/107637/jsfiddle-caret-fix-for-chrome

【参考方案2】：

感谢user1803096 的快速修复。现在因为每次使用检查器删除这个特定的 CSS 规则都很无聊，我更喜欢复制/粘贴并在控制台中执行以下 javascript：

var css = '*, body, button, input, textarea, select text-rendering: initial;',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet)
  style.styleSheet.cssText = css;
 else 
  style.appendChild(document.createTextNode(css));


head.appendChild(style);

希望这将很快得到解决。

【讨论】：

非常感谢，这已经让我死了几个星期 - tampermonkey 脚本已启动并运行！