Question

我尝试从图像孩子那里得到一个适合它宽度的div。它适用于Google Chrome，Safari，但不适用于=＆lt; 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/

Answer 1

我很抱歉，但你的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选择器。
更改：音频播放封面到div.audio-player-cover
jsfiddle：jsfiddle.net/zKEkG/8

IE中的css div fit image child

1 个答案: