HTML CSS 标题图片无法正确 float

Question

大家下午好

我正在尝试创建一个基本的标题

顶部的空白区域，图像向左浮动，图像向右浮动。

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

要求是页眉始终为 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;
}

知道为什么它会这样吗？!

提前致谢

Answer 1

在起始帖子的一些评论中，您提到了它在 Internet Explorer 或 Firefox 中无法正常工作。

它在 chrome 中有效吗？

所以它可能与 firefox 或 IE 不兼容。

没有多少人使用 IE，因为它已被 Microsoft 淘汰。

那么，现在让我们只关注 Firefox 和较小的屏幕，因为这似乎也是一个问题。

小屏幕的解决方案:使用视口(viewport)或媒体查询(要么或应该修复它)

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

对于 FireFox 的问题，您能解释一下它的作用吗？您只是提到了小屏幕的问题到底在做什么，但没有解释 Firefox (IE) 的问题

谢谢!