html - IE float 权限问题

Question

我在 IE9 中遇到一个跨度 (span.share) 的问题，我正试图将其 float:right 放在 的 div 旁边>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 宽度，它应该确保一切保持相同的宽度。