0
我只是有一些奇怪的布局问题之间的IE浏览器和Chrome浏览器,我可以让它看起来体面的一个,但不是其他。使用CSS移动下拉菜单栏可以让它在Chrome浏览器上看起来很棒,但是移动其中一个栏到IE中页面的中间位置。我不是网页编程/布局的最佳人选,所以我可能会错过一些小的/简单的东西。附在问题的图片上。铬和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="images/search.gif" border="0" alt="Search" />" />
</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>