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頭圖像不浮正確

回答

相關問題