Chrome и IE макет Различия проблемы

Question

У меня просто странные проблемы с компоновкой между IE и Chrome, я могу заставить его выглядеть достойно на одном, но не на другом. Перемещение выпадающего меню с помощью CSS делает его великолепно выглядящим в Chrome, но перемещает одну из панелей до середины страницы в IE. Я не лучший в веб-программировании / макетах, поэтому я могу упустить что-то маленькое / простое. прилагается на фотографии вопроса.

IE-PROD

Хром-PROD

IE-DEV(изменения)

Хром-DEV(изменения)

единственные изменения, которые я сделал до сих пор, относятся к Css, и вот они: (верхнее выпадающее меню)

#searchbar {
    margin: 3px 0;
    padding: 3px 0;
    width: 190px;
    clear: left;
}

/*translate element*/
#google_translate_element {
  color: transparent;
}

чтобы:

 #searchbar {
position:relative;
    top: 15px; 
    right: -10px;
    margin: 3px 0;
    padding: 3px 0;
    width: 190px;
    /*clear: left;*/
}

/*translate element*/
#google_translate_element {
 position: relative;
 left: -310px;
  color: transparent;
}

соответствующий код HTML/ascx выглядит следующим образом (без изменений между prod/dev)(ссылки удалены):

<div id="container">

<div class="skin-header">

<!-- Begin Accessibility Links -->
    <ul class="accesslinks">
      <li><a href="#navigation" accesskey="n">Go to Site Links</a></li>
      <li><a href="#maincontent" accesskey="s">Skip to Page Content</a></li>
      <li><a href="http://r" accesskey="h">Go to Home Page</a> </li>
      <li><a href="mailto:email" accesskey="0">Email Webmaster</a></li>
     </ul>
<!-- End Accessibility Links -->



<div class="skin-header_left">

<h2>header</h2>
<h3 class="motto">Building a Better tomorrow</h3>
</div>

<div class="skin-header_right">

    <div id="header_icons">
    <a href="http://mai" title="check your  email"><img 
    src="/images/ch" alt="staff check  email" /></a>
    <a href="http://w" 
    title=" facebook page" rel="external"><img src="/images/facebook1.png" 
    alt="facebook page" /></a>
    <a href="http://tw" title=" twitter" rel="external"><img 
    src="/images/twitter1.png" alt=" tweets" /></a>
    <a href="http://www.youtube.com" title=" on youtube" rel="external">    
    <img src="/images/youtube1.png" alt=" youtube" /></a>
    <a href="http://r" title=" news rss feed" 
    rel="external"><img src="/images/rss1.png" alt=" rss feed"/></a>
    </div>

 <div id="searchbar">
    <dnn:SEARCH runat="server" id="dnnSEARCH" CssClass="search"     UseDropDownList="true" Submit="<img src=&quot;images/search.gif&quot;     border=&quot;0&quot; alt=&quot;Search&quot; /&gt;" />
</div>

<!-- google tranlation widget code March 23, 2015 -->   

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

<!-- google tranlation widget code March 23, 2015 -->


</div>

Answer 1

Оказывается, что использование этого синтаксиса для размещения переводчика Google работает намного лучше для макета в обоих, никаких изменений CSS не потребовалось вообще.

 <!-- google tranlation widget code March 23, 2015 -->   

<div  style="display:block;clear:both;"><div id="google_translate_element">    </div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'},     'google_translate_element');
}
</script><script type="text/javascript"     src="//translate.google.com/translate_a/element.js?    cb=googleTranslateElementInit"></script>
 </div>

<!-- google tranlation widget code March 23, 2015 -->