IE浮动权问题

Question

我在IE9中遇到了一个问题，我想在span.share旁边的一个div float:right所有这一切内的跨度（float:left）。

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

如果容器宽度未知，则可以使用position absolute而不是float for Share按钮。只需将其放在流中的图像后面，并设置只有正确的坐标（不要设置顶部）。它将是：

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

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