Question

我想从google翻译按钮中移除箭头，无论我做什么，我都无法将其从IE7或IE8中移除，这让我发疯了。

以下箭头图片：

arrow in google translate

我已经能够设置翻译的其余部分，但是这个箭头不会去任何地方。用于Chrome和FF的代码是：

div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:last-child

我正在运行modernizr和所有其他东西来增加对最后一个孩子的支持。所有HTML都有效，因此没有激活任何查询模式。我甚至无法用jquery来定位它。它太奇怪了。

任何帮助都会很棒。

抱歉应该添加此内容，这是google希望您放入页面的内容：

    <div id="google_translate_element"></div>
<script type="text/javascript">
                                                    function googleTranslateElementInit() {
                                                      new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,es,fr,pl,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
                                                    }
                                                    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

然后这是它吐出来的：

<div id="google_translate_element">
<div class="skiptranslate goog-te-gadget" dir="ltr" style="">
<div id=":0.targetLanguage" class="goog-te-gadget-simple" style="white-space: nowrap;">
<img src="http://www.google.com/images/cleardot.gif" class="goog-te-gadget-icon" style="background-image: url(http://translate.googleapis.com/translate_static/img/te_ctrl3.gif); background-position: -65px 0px;">
<span style="vertical-align: middle;">
    <a class="goog-te-menu-value" href="javascript:void(0)">
    <span>Select Language</span>
    <img src="http://www.google.com/images/cleardot.gif" width="1" height="1">
    <span style="border-left-width: 1px; border-left-style: solid; border-left-color: rgb(187, 187, 187);">&#8203;</span>
    <img src="http://www.google.com/images/cleardot.gif" width="1" height="1">
    <span style="color: rgb(155, 155, 155);">▼</span>
    </a>
</span>
</div>
</div>
</div>

以及我尝试定位的最后一个范围：

<span style="color: rgb(155, 155, 155);">▼</span>

Answer 1

假设生成的代码永远不会改变，你可以这样做：

#google_translate_element span[style="color: rgb(155, 155, 155);"] {
    display:none;
}

这确实看起来相当大 - 如果您直接从Google加载此代码，则无法预测他们可能会以某种微妙的方式更改其代码并破坏您的选择器。

使用#google_translate_element a>span:last-child作为选择器可能是一种更“正确”的方式，但即使这样做也取决于Google决定更改其小部件的布局。几乎任何你试图用来获得这个元素的选择器都会在那个分数上遇到同样的问题。

要接近的另一个角度可能是使用javascript来查找并替换字符串中的向下箭头字符。也许是这样的：

$("#google_translate_element a span").each(function() {
    $(this).html($(this).html().replace(/▼/,""));
});

在此处使用each()，以便我可以避免对选择器过于具体，以避免上述问题。

我知道这看起来像是一种冗长的方式，但我试图避免破坏任何事件处理程序。否则我就可以做到：

document.body.innerHTML = document.body.innerHTML.replace(/▼/,"");

但是如果你使用事件处理程序会破坏东西，因为它会重建整个DOM，所以使用each()方法代替全局替换。

Answer 2

ie7和8不理解last-child ...如果我是你，我会通过条件评论目标ie8及以下插入javascript，然后删除/隐藏元素。 jQuery是最简单的，你可以使用jQuery last-child选择器

谷歌翻译删除IE中的箭头

2 个答案: