IE浮动权问题

我在IE9中有一个跨度（span.share）的问题，我试图float:right旁边的一个div是float:left所有这些在一个范围内。IE浮动权问题

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

这是它看起来像IE9：

enter image description here

这是它应该如何看（以及其他浏览器的样子）：

enter image description here

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.shareposition:absolute，但我不得不改变它，因为它是造成与页面上的其他元素的问题。

来源

2012-10-09 bflemi3

我必须问，为什么你要在'span.contentItem's中设置'display：block'，但是你在'CSS中显示了同样的项目'display：inline-block！important;'... ？ –

@Kolink这个页面上有很多jQuery，它是jquery在该元素上设置“display：block”。我已经证实，这不是ie中的问题。 – bflemi3

如果你指的是'.name-date'，在你的标记中用'span.share'替换它的位置。 – bfavaretto

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

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

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

来源

2012-10-09 21:24:35 kwelch

是的，就是这样。我讨厌设置宽度，但看起来像另一个IE FAIL。我设置了'.contentItem {width：450px; ''和'。detailsWrapper {width：100％; } – bflemi3

如果容器宽度未知，您可以使用绝对位置代替共享按钮的位置。只要将它放在流程中的图像之后，并且只设置正确的坐标（不要置顶）。这将是：

通过其内容

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

要尺寸的容器用display：内联块|表，浮动或位置：绝对的。

来源

2012-10-09 22:00:16 gkond

我在问题的底部注意到了这一点 - 我已经尝试了这一点，并且在工作时，我无法使用此解决方案，因为它导致页面上的其他元素出现问题。 – bflemi3

回答

相关问题