Monaco Editor选中文本高亮错位、光标显示异常问题求助

这种问题几乎都是全局CSS样式污染了Monaco的内部渲染元素导致的——Monaco依赖精确的坐标计算来渲染光标、选中文本高亮，全局的box-sizing、line-height、font属性，或是给div/span设置的额外padding/margin，都会打乱它的布局计算。以下是几种可行的修复方案：

方案1：用Shadow DOM彻底隔离样式（推荐） #

Shadow DOM会创建一个独立的样式作用域，完全避免全局CSS的干扰，是最彻底的解决方式：

// 1. 创建编辑器容器并附加Shadow DOM
const editorWrapper = document.createElement('div');
editorWrapper.style.width = '800px';
editorWrapper.style.height = '600px';
const shadowRoot = editorWrapper.attachShadow({ mode: 'open' });

// 2. 将Monaco的样式注入Shadow DOM内部
const monacoStyle = document.createElement('link');
monacoStyle.rel = 'stylesheet';
monacoStyle.href = 'https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/editor/editor.main.css';
shadowRoot.appendChild(monacoStyle);

// 3. 创建编辑器的内部容器
const editorContainer = document.createElement('div');
shadowRoot.appendChild(editorContainer);

// 4. 将容器添加到页面
document.body.appendChild(editorWrapper);

// 5. 初始化Monaco Editor
require.config({ paths: { 'vs': 'https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function() {
    monaco.editor.create(editorContainer, {
        value: 'function test() {\n\tconsole.log("修复成功");\n}',
        language: 'javascript'
    });
});

方案2：强制重置Monaco内部元素样式 #

如果不想用Shadow DOM，可以给Monaco的容器加一个专属类，然后强制重置其内部所有元素的样式，抵消全局CSS的影响：

/* 先添加全局重置样式，放在Monaco样式之前 */
.monaco-editor-reset * {
    all: unset !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

然后修改HTML中的容器：

<div class="monaco-editor-reset" id="editor" style="width:800px;height:600px;"></div>

注意：需要确保Monaco的editor.main.css链接放在这个重置样式之后，让原生样式能覆盖基础重置。

方案3：快速定位干扰源 #

如果想找到具体是哪个全局CSS规则导致的问题，可以用浏览器开发者工具排查：

• 打开DevTools（F12），切换到「元素」面板，选中Monaco编辑器的内部容器（通常是.monaco-editor下的某个子元素）
• 在「样式」面板中，逐个禁用页面的全局样式表（点击样式表名称前的复选框），直到编辑器恢复正常
• 定位到出问题的样式表后，查找其中可能影响布局的规则，比如全局的* { line-height: 1.8; }、div { padding: 2px; }或box-sizing: content-box;，然后给Monaco添加针对性的覆盖规则。

内容的提问来源于stack exchange，提问作者abe1432181