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中不起作用的原因是您的页面显示在Quirks Mode中。

如果您删除文档顶部的这一行：

<!--<?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 的样式中？