我尝试从子图像中获得一个适合其宽度的 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%;
}
还有 fiddle ; http://jsfiddle.net/zKEkG/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 选择器。
更改:audio-play-cover 到 div.audio-player-cover
jsfiddle: jsfiddle.net/zKEkG/8
关于IE 中的 css div 适合图像子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18027231/