2

私は IE9 で、すべてがスパン内にある div の隣にspan.shareしようとしているスパン () で問題を抱えています。float:rightfloat: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たが、ページ上の他の要素に問題が発生していたため、変更する必要がありました。

4

2 に答える 2

0

コンテナーの幅が不明な場合は、共有ボタンに float の代わりに position absolute を使用できます。フローの画像の直後に配置し、正しい座標のみを設定します（上に設定しないでください）。可も知れません：

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

コンテナの内容によってサイズを変更するには、display:inline-block|table、float、または position:absolute を使用します。

于 2012-10-09T22:00:16.843 に答える
0

見た目から、ある時点で幅を指定する必要があります。それらはすべて自動に設定されているため、できるだけ多くのスペースを取っています。に特定の幅と 100% の幅を設定してみます.detailsWrapper。

これにより、幅が親を決して超えないようにする必要がありますが、これは、パーツの幅に境界があることを確認する必要があることも意味します。

幅が動的である場合はjQuery、画像がロードされたときにそれらを設定するために使用し、画像の幅を使用して幅を設定してみ.contentItemてください。すべてが同じ幅に保たれるようにする必要があります。

于 2012-10-09T21:24:35.240 に答える