Question

与IE头痛。我有一个图像（24x24），我想在登录后在顶部导航栏上的用户名旁边显示内联。它很好地显示在firefox，chrome中。 IE版本7的问题.igg中断了另一行，并且浮动中的其他兄弟项目向左移动。

下面的CSS：

    #nav {
           background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
           height:35px;
           line-height:35px;
    }
    #nav .menuitem{
        padding: 0 7px;
        cursor: pointer;
        font-size: 11px;
        float:left;
    }
    #nav .menuitem, #nav .menuitem a {
        color:#CCCCCC;  
    }
    #nav .menuitem:hover {
        background-color:#333333;
    }
    #nav .menuitem img {
           -moz-border-radius:3px;
           -webkit-border-radius:3px;
           border:1px solid #111;
           float: right;
           margin-top: 4px;
           margin-left: 7px;
           height:24px;
           width:24px;
    }
    #nav .right {
        float:right;
    }

我尝试了很多变化，但似乎无法解决问题。我也尝试过以下css的变体，但图像仍然不能很好地显示内联。

#nav .menuitem img {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #111;
    float: right;
    margin-top: 4px;
    margin-left: 7px;
    height:24px;
    width:24px;
    display:inline;
    position:relative;
    top: 0px;
    line-height: 35px;
}

HTML代码如下

<span class="menuitem right">Welcome, <a id="profile" href="http://localhost/usercp">user<img src="avatar24x24.jpg"></a></span>

Answer 1

我修改了 css和html源。我只使用IE6，但它在Chrome和IE6中看起来一致。试试这个：

http://work.arounds.org/sandbox/38/run

<!doctype html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css" media="screen"> 
    * { margin:0; padding:0; }

    #nav {
           background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
           height:35px;
           line-height:35px;
    }

    #nav .menuitem{
        padding: 0 7px;
        cursor: pointer;
        font-size: 11px;
        float:left;
    }
    #nav .menuitem, #nav .menuitem a {
        color:#CCCCCC;  
    }
    #nav .menuitem:hover {
        background-color:#333333;
    }
    #nav .menuitem img {
           -moz-border-radius:3px;
           -webkit-border-radius:3px;
           border:1px solid #111;
           display:inline-block;
           margin-top: 4px;
           margin-left: 7px;
           height:24px;
           width:24px;
    }
#nav a { display:inline-block; vertical-align:top; }
.lol { display:inline-block; }
    #nav .right {
        float:right;
    }

    </style> 

<!--[if lt IE 8]>
<style>
#nav .menuitem a { display:inline; zoom:1; }
#nav .menuitem img { display:inline; zoom:1; border:1px solid red; vertical-align:top; }
</style>
<![endif]--> 

</head> 
<body> 

<div id="nav"> 

<div class="right menuitem"> 
<span class="lol">Welcome,</span> <a id="profile" href="http://localhost/usercp">user</a> <a id="profile-img" href="http://localhost/usercp"><img src="http://cdn1.sbnation.com/profile_images/273745/battle_scars_fedor_emelianenko_by_wildestdreamz_small.jpg"></a> 
</div> 

</div> 





</body> 
</html>

此代码段受float:right width calculation bug影响，我不得不使用内联块解决方法使其正常工作。

Answer 2

使用背景图片，如下所示：

<a style="background-image: url(avatar24x24.jpg);
          background-repeat: no-repeat;
          background-position: right center; padding-right: 30px;"
          id="profile" href="http://localhost/usercp">user</a>

应该很好地定位它，在Opera，IE8兼容模式和Firefox中进行测试。要显示整个图像，请调整其周围元素的高度。

您可以使用background-position在周围元素内部移动图像，w3schools.com上有更多相关信息。

或者，您可以使用边距来获得更多间距（边距将创建包含背景图像的间距）。

在IE中为浮动元素显示img内联

2 个答案: