IE 7 和 Opera 中的图像+文本布局问题

Question

里面有 div 容器和 2 个 div。它应该是图像（第一个 div）和它附近的文本，它们之间的距离是选定的。

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

以下代码在 Firefox/Chrome/Safari 中运行良好，但在 IE7/Opera 中运行不正常。 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
}

玩得开心;)