在IE中顯示IMG內嵌浮動元素

IE頭疼。我有一個圖像（24x24），我想在登錄後在頂部導航欄處在我的用戶名旁邊內聯顯示。它在firefox和chrome中很好地顯示。與IE版本7的問題。img打破了另一條線，其他同胞項目在左邊。下面在IE中顯示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>

來源

2010-10-04 Dork

在IE7中正常工作。 http://jsfiddle.net/p6Mug/ – Kyle 2010-10-04 08:24:23

@凱爾 - 你沒有'＃nav'元素。 – 2010-10-04 08:26:05

真的，剛從OP的問題中複製了代碼，但是這是一個更新http://jsfiddle.net/p6Mug/1/ – Kyle 2010-10-04 08:29:28

使用背景圖片來代替，就像這樣：

<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有更多關於此的信息。

或者，您可以使用邊距來獲得更多的間距（邊距將創建包含背景圖像的間距）。

來源

2010-10-04 08:43:52 Vetle

我知道它在你的代碼段中很好地顯示在IE中，但是在父跨度中使用了樣式.menuitem代替。但是一個小問題，我如何添加填充圖像？它一路走好，我需要一些填充來填滿 – Dork 2010-10-04 09:36:20

你可以使用background-position在周圍元素內部移動圖像，請參閱：http://www.w3schools.com/css/pr_background-position。 asp或者，您可以使用邊距來獲得更多的間距（邊距將創建包含背景圖像的間距）。 – Vetle 2010-10-04 10:31:56

我使用了背景位置：92％，它很完美。非常感謝！也只是爲了與大家分享，保證金不會徘徊，只有填充。乾杯。 – Dork 2010-10-04 10:42:18

我改變了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遭遇，我不得不使用inline-block的變通方法來得到它的工作的權利。

來源

2010-10-04 08:32:20

在IE中顯示IMG內嵌浮動元素

回答

相關問題