Google Translate Padding問題

我遇到Google Translate的填充問題。當你點擊選擇語言按鈕並且菜單下降時，最後一行（單詞）就位於IE和Chrome邊框的頂部（Firefox工作正常），但是如果再次點擊下拉菜單重新打開它再次填充是固定的....我無法弄清楚爲什麼會發生這種情況，就像它第二次輸入它自動知道自己糾正。請問有人會告訴我爲什麼會發生這種情況？如果你對如何改正它有任何想法。Google Translate Padding問題

https://jsfiddle.net/tgokbf5j/4/

$('document').ready(function() { 
 
    $('#google_translate_element').on("click", function() { 
 

 
     // Change font family and color 
 
     $("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *") 
 
      .css({ 
 
       'color': '#687074', 
 
       'font-family': 'tahoma' 
 
      }); 
 

 
     // Change hover effects 
 
     $("iframe").contents().find(".goog-te-menu2-item div").hover(function() { 
 
      $(this).css('background-color', '#18BA9B').find('span.text').css('color', 'white'); 
 
     }, function() { 
 
      $(this).css('background-color', 'white').find('span.text').css('color', '#687074'); 
 
     }); 
 

 
     // Change Google's default blue border 
 
     $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #18BA9B'); 
 

 
     // Change the iframe's box shadow 
 
     $(".goog-te-menu-frame").css({ 
 
      '-moz-box-shadow': '0 3px 8px 2px #666666', 
 
      '-webkit-box-shadow': '0 3px 8px 2px #666', 
 
      'box-shadow': '0 3px 8px 2px #666' 
 
     }); 
 
    }); 
 
});

a.goog-te-menu-value { 
 
text-decoration:none; 
 
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
 
} 
 
a.goog-te-menu-value > span { 
 
text-transform: uppercase; 
 
} 
 
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover { 
 
\t color:#18BA9B; 
 
} 
 

 
a.goog-te-menu-value:hover span 
 
{ 
 
     color: #18BA9B !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="google_translate_element" style="float:left; padding-left:15px"></div> 
 

 
<script type="text/javascript"> 
 
\t \t \t function googleTranslateElementInit() { 
 
\t \t \t \t new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); 
 
\t \t \t } 
 
\t \t </script> 
 
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

來源

2015-12-07 David Brierton

我已經將問題隔離到字體的變化。它不會再發生，因爲字體已經設置了一次。我仍然沒有得到它第二次正確調整 –

好吧，我想它是因爲你的第一個選擇器中的'*'。刪除它，它工作正常。檢查[這裏]（https://jsfiddle.net/tgokbf5j/6/） –

'*'是代表所有的元字符。以下是對[documentation]（https://api.jquery.com/category/selectors/）的參考。從這行'$（「iframe」）。contents（）。find（「。goog-te-menu2-item div，.goog-te-menu2-item：鏈接div，.goog-te-menu2-item：visited div，.goog-te-menu2-item：活動div，.goog-te-menu2 *「）' –

*是元字符它代表一切。這裏是對jQuery documentation的引用。從該行中刪除*：

$("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *")

而當你想到它應該工作。

來源

2015-12-07 18:36:01

Google Translate Padding問題

回答

相關問題