1

画像の子から幅に収まる div を作成しようとしています。google chrome、safari では動作しますが、=< IE9 やその他のブラウザーでは動作しません...この div はレスポンシブで、高さは js で定義された % です。

ここにhtmlコード：

<div class="element wide music">
    <div class="element-container element-back-bg5">

        <div class="audio-player-cover">
            <img class="cover" src="http://www.konbini.com/fr/files/2013/04/Random-Access-Memories-Daft-Punk-88883716862.png" alt="" />
        </div>

        <div class="audio-player-informations">
            <div class="element-audio-separator"></div>
            <div class="audio-player-songtitle">Get Lucky feat Colin Farrell</div>
        </div>

    </div>
</div>

そしてcss：

.element {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    float: left;
    width: 450px;
    height: 180px;
    border: none;
}
.element-container {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2px!important;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
    /*box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);*/
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.audio-player-cover div {
    position: relative;
    height: 100%;
    width: auto;
    float: left;
}
.audio-player-informations {
    position: relative;
    overflow: hidden;
    height: 100%;
}
.audio-player-cover img.cover {
    position: relative;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    width: auto;
    float: left;
}
.audio-player-artiste {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    opacity: 1;
    font-family: 'MavenProLight-300';
    font-size: 16px;
    line-height: 30px;
    text-align: left;
}
/* Title */
.audio-player-songtitle {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
    width: 100%;
    height: 30px;
    margin-top: 20px;
    box-sizing: border-box;
    opacity: 1;
    font-family: 'MavenProLight-300';
    font-size: 20px;
    line-height: 30px;
    text-align: left;
}
.element-back-bg5 {
    background:#ECEDF0;
    color: #58585C;
}
.element-audio-separator {
    position: absolute;
    overflow: hidden;
    width: 3px;
    height: 100%;
    left: 0;
    top: 0;
    border-left: 1px solid rgba(0,0,0,0.05);
    -webkit-box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.2);
    box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.2);
}
.element.wide  .audio-player-songtitle, .element.square .audio-player-artiste {
    padding-left: 5%;
    padding-right: 5%;
}

そしてフィドル。http://jsfiddle.net/zKEkG/1/

4

1 に答える 1

-2

申し訳ありませんが、あなたのCSSは非常に面倒です。ボックス モデルとポジショニングの仕組みについて十分に理解していないようです。読むことをお勧めします：

ボックス モデルの詳細:
http://learn.shayhowe.com/html-css/box-model

css を使用してポジショニングを適切に使用する方法の詳細:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

問題の簡単な修正として、カバー画像の高さをコンテナーの高さに直接設定すると、クロスブラウザーで動作するはずです。

.audio-player-cover img.cover {
    /*Manually set height to match container*/ height: 180px;
    min-height: 100%;
    max-height: 100%;
    width: auto;
    float: left;
}

編集済み:
誤解された質問。問題はより厳密なcssセレクターにあるようです。
変更: audio-play-cover から div.audio-player-cover
jsfiddle: jsfiddle.net/zKEkG/8

于 2013-08-03T01:07:34.403 に答える