html - 在Internet Explorer中将子项与内联父项的顶部对齐

我想将元素与封闭的嵌入式元素的顶部对齐。因此，我正在使用以下代码：

HTML：

<span id="outer">
    <img src="http://placekitten.com/200/200" />
    <span id="inner">Watch me align!</span>
</span>

CSS：

#outer {
    position: relative;
}

#inner {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
}

img {
    vertical-align: top;
}

该代码在Firefox和Chrome中有效：文本位于图像的左上角。但是在Internet Explorer中，文本会停留在图像的底部。

您可以在my Fiddle中看到它。

阅读this MSDN entry后，我得出结论，vertical-align属性不适用于嵌入式元素，因为它们不支持valign属性。

到目前为止，我最好的主意是使用一些JavaScript重新定位文本，但您可能会同意：这不是一个优雅的解决方案。

因此，您知道在Internet Explorer中完成这项工作的任何巧妙技巧吗？

重要！父级的以下CSS属性无法更改：

#outer {
    display: inline;
    position: relative;
    float: none;
}

最佳答案

这应该起作用：http://jsfiddle.net/gcG4D/

的HTML

<span id="outer">
    <img src="http://placekitten.com/200/200" />
    <span id="inner">Watch me align!</span>
</span>

的CSS

#outer {
    position: relative;
    display:inline-block;
    width:auto;
}

#inner {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    display:block;
}

img {
    display:inline-block;
}