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 回答