Question

我目前正在开发一个项目，我正在尝试将图像放在div中，但我不希望div高度设置为'auto'以扩展此图像到目前为止我已经得到了以下内容：

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

HTML / CSS图像定位问题

3 个答案: