HTML / CSS圖像定位問題

Question

我目前正在一個項目中嘗試將圖像放置在div中，但是我不希望將div高度設置為“自動”以在放置此圖像時進行擴展，到目前為止，我得到以下信息：

HTML：

<div id="LogoAndMenu">
<div class="Center">


    <div id="LogoIcon">
        <img style="    text-align:center;"src="images/logoicon.png" />
    </div> <!-- end div #LogoText-->

    <div id="LogoText">
        <img src="images/logotext.png" />
    </div> <!-- end div #LogoText-->


    <div id="Menu">
        <jdoc:include type="modules" name="Top" /> 
    </div> <!-- end div #Menu -->

</div><!-- end div #Center -->

CSS：

.Center{
margin:0px auto;
width: 1000px;
    text-align:left;
}

#LogoAndMenu{
    margin: 0; 
height:50px;
width: auto;
background: #e00b3b; 
text-align:center;
}

#LogoText{
float: left;
margin-top: 5px;
}

#LogoIcon{

float: left;
}

#Menu{
font-family:"Arial", Verdana, Serif;
font-size: 15px;
font-weight: 300;
color: #ffffff;
    }   

#Menu ul{
padding: 1.3% 0 1.3% 15%;
list-style-type: none;
text-align: center;
}

#Menu li { 
display: inline; 
}

#Menu li a{
padding: .2em 1em;
color: #ffffff;
text-decoration: none;
}

#Menu li a:hover{
font-weight: 700;
color: #ffffff;
background: #141515;
}

這適用於Firefox和Chrome，但我對Internet Explorer 8遇到的問題不勝感激，希望能就如何解決此問題提供一些反饋，因為這讓我感到困惑。

當前階段鏈接到網站： www.enbright.co.uk/trunk/

Answer 1

在IE8中不起作用的原因是您的頁面以“ 怪癖模式”顯示。

如果您擺脫了文檔頂部的這一行：

<!--<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>-->

在IE中看起來會很好。

為避免將來出現此類問題，請記住doctype應該始終是第一行。

Answer 2

我的建議是在白色上設置1px寬的紅色背景圖像，並在#LogoAndMenu上設置所需的高度，例如：

#LogoAndMenu{
background:url(blackwhite.png) top left repeat-x; // your 1px x Npx image
height:40px //set to what you want
}

在此處進行編碼-http: //jsfiddle.net/uxNZQ/

Answer 3

您是否嘗試添加overflow: hidden; 到#LogoAndMenu的樣式？