谷歌翻译在IE中删除箭头

Question

我希望从谷歌翻译按钮中删除箭头，无论我做什么，我都无法从 IE7 或 IE8 中删除它，这让我发疯了。

下图箭头：

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

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

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

任何帮助都会很棒。

很抱歉应该添加这个，这是谷歌希望你放入页面的内容：

    <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;
}

不过，这似乎是一个很大的 hack —— 如果您直接从 Google 加载此代码，则无法预测他们可能会以某种微妙的方式更改其代码并破坏您的选择器。

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

另一个方法可能是使用 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 不理解最后一个孩子...如果我是你，我会通过条件 cmets 目标 ie8 及以下插入 javascript，然后删除/隐藏元素。 jQuery 是最简单的，你可以使用 jQuery last-child 选择器