css div fit образ ребенка в IE

Question

Я стараюсь иметь 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/

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-плеер переплет
jsfiddle: jsfiddle.net/zKEkG/8