IE浮动权利问题

Question

我在 IE9 中遇到了一个跨度 (span.share) 的问题，我试图在一个跨度为 float:left 的 div 旁边使用 float:right。所有这些都在一个跨度内。

jsfiddle（记得在IE中查看）：http://jsfiddle.net/MgW6R/2/

这是它在 IE9 中的样子：

这就是它的外观（和在其他浏览器中的外观）：

html

<div class="contentWrapper">
    <div class="content">
        <span class="contentItem">
            <a href="javascript: void(0);">
                <img src="http://www.example.com/image1.jpg">
            </a>
            <div class="detailsWrapper">
                <div class="name-date">
                    <span class="date">Jul 04: </span>
                    <span class="userName">Christie</span>
                </div>
                <span class="share"></span>
                <div class="clear"></div>
                <div class="caption">Watching the fireworks in NY without the crowds, heat and concussion via tv #cahs</div>
            </div>
        </span>
        <span class="contentItem">
            ...
        </span>
    </div>
</div>

css

.contentWrapper {
    overflow: hidden;
    position: relative;
}
.content {
    margin-left: 256px;
    padding-top: 14px;
    position: relative;
    white-space: nowrap;
}   
.contentItem {
    display: inline-block !important;
    margin: 0 14px 0 0;
    vertical-align: top;
}
.contentItem a {
    display: block;
}
.contentItem img {
    height: 450px;
}
.contentItem .detailsWrapper {
    color: #E3E3E3;
    position: relative;
}
.contentItem .detailsWrapper .name-date {
    float: left;
    padding: 5px 0 0;
}
.contentItem .detailsWrapper .share {
    background: url("http://www.connectionsacademy.com/_images/teenWebsite/share-btn-sprite.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    float: right;
    height: 23px;
    width: 91px;
}
.clear { clear: both; }
.contentItem .detailsWrapper .caption {
    margin-top: 10px;
    white-space: normal;
    width: 450px;
    word-wrap: break-word;
}

注意： 我最初有 span.share position:absolute 但我不得不更改它，因为它会导致页面上的其他元素出现问题。

Answer 1

从外观上看，您需要在某个点指定宽度。由于它们都设置为自动，因此它占用了尽可能多的空间。我会尝试为.detailsWrapper 设置一些特定的宽度以及 100% 的宽度。

这应该确保宽度永远不会超过父级，但这也意味着您需要确保零​​件宽度有界限。

如果宽度是动态的，请尝试使用jQuery 将它们设置为加载图像并使用图像宽度设置.contentItem 宽度，它应该确保所有内容都保持相同的宽度。

Answer 2

如果容器宽度未知，您可以使用绝对位置而不是浮动作为共享按钮。只需将其放在流中的图像之后并仅设置正确的坐标（不要设置为顶部）。会是：

.container {position:relative;border:2px solid blue;...}
.button-share {position:absolute;right:0;...}

要根据内容调整容器大小，请使用 display:inline-block|table、float 或 position:absolute。