Question

我想将元素对齐到封闭内联元素的顶部。因此，我使用此代码：

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;
}

Answer 1

这应该有效：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;
}

Answer 2

您需要触发布局以跨越

float left或right或
display inline-block，table，inline-table，block ...但是 inline或
position fixed或absolute或

http://jsfiddle.net/K9pEb/3/

Answer 3

只需将display: inline-block;添加到#outer课程即可。它应该在IE中修复你的问题。

在Internet Explorer中将子对齐到内联父级的顶部

3 个答案: