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

回答

相關問題