如何隐藏Google Translate工具栏弹窗？现有方案失效求助

精准隐藏顶部工具栏，不影响下拉功能 #

使用更具体的CSS选择器，只隐藏顶部的翻译提示栏，而非整个.skiptranslate容器（下拉菜单通常嵌套在此容器内，直接隐藏会导致功能失效）：

/* 隐藏顶部翻译工具栏 */
.skiptranslate > iframe {
    display: none !important;
}

/* 修正body被顶起的布局问题 */
body {
    top: 0 !important;
}

/* 保留你已有的下拉菜单自定义样式 */
.goog-te-gadget-icon {
    display: none;
}

.goog-te-gadget-simple {
    background-color: #ecebf0 !important;
    border: 0 !important;
    outline: 1px solid black;
    font-size: 10pt;
    font-weight: 800;
    display: inline-block;
    padding: 10px 10px !important;
    cursor: pointer;
    zoom: 1;
}

.goog-te-gadget-simple span {
    color: #000 !important;
}

动态DOM适配方案（CSS失效时备用） #

如果Google动态更新DOM结构导致CSS无法及时生效，可添加一段JS延迟检测并隐藏工具栏：

document.addEventListener('DOMContentLoaded', function() {
    // 定时检查并处理动态插入的工具栏元素
    setInterval(function() {
        const translateBar = document.querySelector('.skiptranslate > iframe');
        if (translateBar) {
            translateBar.style.display = 'none';
            document.body.style.top = '0';
        }
    }, 1000);
});

关键提示 #

• 不要直接设置.skiptranslate { display: none !important; }，这会隐藏整个翻译组件容器，连带下拉菜单一起失效。
• 可通过浏览器开发者工具实时查看Google翻译插入的最新DOM结构，随时调整CSS选择器适配结构变化。

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