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 模式 显示。

如果你去掉文档顶部的这一行：

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

它在 IE 中看起来会很好。

为了避免将来出现类似问题，请记住文档类型应始终位于第一行。

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: hide; 添加到 #LogoAndMenu 的样式中？