Css 在IE的浮动元素内显示img内联

IE让我头疼。我有一个图像（24x24），我想在登录后在顶部导航栏的用户名旁边内联显示。它在firefox和chrome中表现得很好。IE版本7的问题。img将断开到另一行，浮动中的其他兄弟项将返回到左侧

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>

欢迎您，

我更改了css和html源代码。我只有IE6可以使用，但它在Chrome和IE6中看起来是一致的。试试这个：

*{边距：0；填充：0；}
#导航{
背景：url（“../images/nav bg.jpg”）重复-x滚动0 0#FFFFFF；
高度：35px；
线高：35px；
}
#导航菜单项{
填充：0 7px；
光标：指针；
字体大小：11px；
浮动：左；
}
#导航菜单项，#导航菜单项a{
颜色：#中交；
}
#导航菜单项：悬停{
背景色：#333333；
}
#导航菜单img{
-moz边界半径：3px；
-webkit边界半径：3px；
边框：1px实心#111；
显示：内联块；
利润上限：4倍；
左边距：7px；
高度：24px；
宽度：24px；
}
#导航a{显示：内联块；垂直对齐：顶部；}
.lol{显示：内联块；}
#导航，对{
浮动：对；
}
欢迎

---

此代码段遇到了错误，我不得不使用内联块解决方法使其正常工作。

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

<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中进行了测试。要显示整个图像，请调整其周围元素的高度

---

您可以使用“背景位置”在周围元素内移动图像，有关这方面的详细信息，请参阅

---

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

与这里的IE7一样工作良好@Kyle-您没有

#nav

元素。没错，只是从OP的问题中复制了代码，但这里有一个更新，我将它与您的代码片段一起很好地显示在IE中，但使用了父span.menuitem上的样式。不过有一个小麻烦，我如何在图像中添加填充？它完全正确，我需要一些悬停填充。您可以使用背景位置在周围元素内移动图像，请参见：或者，您可以使用边距获得更多间距（边距将创建包含背景图像的间距）。我使用了背景位置：92%，这很完美。谢谢！也只是为了和大家分享，利润率不会被悬停，只有填充会被悬停。干杯

<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>