IE 7中的圖像+文字佈局問題＆Opera

Question

裏面有div容器和2個div。它應該是圖像（第一格）和文字靠近它們之間的選擇距離。下面

alt text http://img24.imageshack.us/img24/1160/2delcontact.png

代碼工作在Firefox/Chrome瀏覽器/ Safari瀏覽器很好，但它在IE7 /歌劇作品不正確。 alt text http://img710.imageshack.us/img710/5675/2delcontactie7opera.png

XHTML：

<div id="mainContact"> 
    <div id="contactIcon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <img id="phoneImg" alt="phone" src="img/cellPhone.png" /> 
    </div> 
    <div id="contactField"> 
     <span id="topMailAddress">07897 255 664</span> 
    </div> 
</div> 

CSS：

html, body{ font-family: Tahoma; } 

img{ border: 0px; } 

#mainContact{ 
    width: 135px; 
    float: right; 
    overflow: hidden; 
    font-family: Trebuchet MS; 
} 

#contactIcon{ 
    width: 19px; 
    margin-right: 7px; 
    float: left; 
    text-align: right; 
} 

#phoneImg{ 
    position: relative; 
    bottom: 14px; 
} 

#contactField{ 
    float: right; 
    width: 109px; 
    text-align: right; 
    font-size: 1.12em; 
    color: #454545; 
} 

#topMailAddress{ 
    position: relative; 
    width: 109px; 
    top: 13px; 
} 

這裏是服務器這個例子：link text

可以採取什麼這個問題的原因是什麼？

Answer 1

試試這個

HTML

<div id="mainContact"> 
     <img id="phoneImg" alt="phone" src="img/cellPhone.png" /> 
     <span id="topMailAddress">07897 255 664</span> 
</div> 
<br class="clear" /> 

CSS

#mainContact { 
    width: 200px; // Width of whole element - adjust to always fit number 
} 
    #mainContact #phoneImg, 
    #mainContact #topMailAddress { 
     display: block; 
     float: left; 
    } 
    #mainContact #phoneImg { 
     margin-right: 10px; // Adjust gap between image and text 
    } 
br.clear { 
    clear: both; 
    height: 1px; 
    overflow:hidden; 
    font-size: 1px; // For IE and the like 
} 

玩得開心;）