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
}

玩得开心;）

IE 7中的图像+文本布局问题＆amp;歌剧

1 个答案: