HTML CSS头图像不浮正确

我试图创建一个基本的头顶部处

白色空间与浮动左图像和右浮动的图像。

然后在这个下面有一些灰色的背景，左边有一个按钮，右边有一些导航按钮。

要求是标题将始终为100％宽度，并且当您向下滚动页面时，标题始终保留在顶部。

我有这个工作正常与我目前的HTML和CSS，但是当我减少屏幕大小，例如在我的笔记本电脑上右键点击笔记本电脑上的1368x768分辨率右侧的图像浮动在右侧按钮下方，但在灰色边框内？

左图像尺寸= 480x80 右图像尺寸= 264x80

HTML

<div id="banner"> 
     <img src="/images/img1.png" style="float:left"/> 
     <img src="/images/img2.png" style="float:right"/> 
    </div> 

<div id="header"> 
<div id="header_left"> 
    <form action= "<?php echo $_SERVER['PHP_SELF']; ?>" method ="POST"> 
     <select name=dbselector> 
      <?php 
       echo '<option value="1"'; 
        if ($_COOKIE[$cookie] == "x") { 
         echo ' selected="selected"';} 
          echo '>1</option>'; 
       echo '<option value="2"'; 
        if ($_COOKIE[$cookie] == "y") 
         {echo ' selected="selected"';} 
          echo '>2</option>'; 
      ?> 
     </select> 
     <input name="submit_button" type="submit" value="Submit"/> 
    </form> 
</div> 

<div id="header_right"> 
    <?php date_default_timezone_set('Europe/London'); echo date('h:i:s');?> 
    <input type="button" value="Back" onclick="history.go(-1)"> 
    <a href="www.google.co.uk" style="text-decoration: none"> 
     <input type="button" value="Home"> 
    </a> 
    <input type="button" value="Refresh" onClick="history.go(0)" > 
    <input type="button" value="Forward" onclick="history.go(1)"> 
</div> 
</div>

CSS

#header 
{ 
width: 100%; 
position: fixed; 
background:#58575b; 
padding-top: 0px; 
padding-bottom:0.5em; 
margin: 0px 
} 

#banner 
{ 
background:#fff; 
width:100%; 
height: 5em; 
} 

#header_left 
{ 
float: left; 
padding: 0em; 
padding-left: 0.5em; 
margin: 0em; 
} 

#header_right 
{ 
float: right; 
padding: 0em; 
margin: 0em; 
padding-right: 0.5em; 
}

任何想法，为什么它的行为就像这样？

在此先感谢

来源

2016-09-18 bepster

请上传小提琴，以便我们自己测试并更好地帮助您。 jsfiddle.net – Django

奇怪我似乎无法在jsfiddle中重新创建问题，它按预期工作 – bepster

这是行代码，即时通讯使用我的代码 https://jsfiddle.net/92xs18hs/2/工作正常jsfiddle，但不是IE或火狐 – bepster

在出发后的一些评论，你说一些事情无法在Internet Explorer或Firefox正常工作。

它在铬合适的权利？

所以它可能是这样的东西是不兼容的Firefox或IE浏览器。

使用IE浏览器的事实并不多，它被微软退役。

因此，现在我们只关注Firefox和更小的屏幕，因为这也是一个问题。

解决方案为小屏幕：使用视口或媒体查询（无论是或应该修复它）

<meta name="viewport" content="width=device-width, initial-scale=1">

使用FireFox的问题，你能解释它做什么？你只是提到这个问题，小屏幕究竟是做什么，但没有解释与Firefox的问题（IE）

谢谢！

来源

2016-09-18 18:05:37

对不起，队友见解决方案，我不知道你的意思是没有很多人使用IE浏览器作为其Windows企业版浏览器？！？！ – bepster

它已被微软分解，并且是非常不安全的，唯一使用它的人是企业或政府，这些企业或政府大多在私人网络上使用更安全的防火墙 –

如果你修复了它，那么你需要编辑你的问题，但是，你的答案没有被彻底解释或任何其他解释，所以这就是为什么它是downvoted（不是我）的想法是stackoverflow是一个目录，如果其他人获得相同的问题，有一个解决方案 –

-1

解决方案是非常基本的...

的的jsfiddle和我的生活代码之间唯一不同的是图像。

我检查了图像，他们有负载的空白，因此为什么它下移！

把我们的企业网站的形象直，所以我甚至没有既检查图像本身的空白.....

哎呀！

来源

2016-09-18 18:07:08 bepster

HTML CSS头图像不浮正确

回答

相关问题