IE8 div width float: right issue для отзывчивого сайта

Question

У меня есть div, # cont3, содержащий другой div, div.banner. # cont3 имеет фоновое изображение. div.banner - это просто белый плавающий div с текстом в нем. Он работает везде, но IE8 - конечно. Это то, что он имел в виду, чтобы выглядеть следующим образом:

Это то, что он делает в IE8:

ДИВ не плавает и супер-тощий. Вот соответствующий HTML (div.container непосредственно в тегах тела):

<div class="container" id="cont3"> 
    <div class="block">  
     <div class="banner"> 
      <h1>Contact us</h1> 
      <p>Blah blah</p> 
     </div> 
    </div> 
</div> 

И CSS:

html { 
    box-sizing: border-box; 
    font-family: "Noto serif", serif; 
    color: dimgray; 
    font-weight: 100; 
    height: 100%; 
width: 100%; 
} 



*, *:before, *:after { 
    box-sizing: border-box; 
} 


body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    font-size: 100%; 
width: 100%; 
} 

h1 { 
    font-size: 55px; 
    font-size: 3.2em; 
    font-size: 350%; 
    font-size: 4.5vw; 
    color: #C9494D; 
    font-family: "Noto serif", serif; 
    font-weight: 100; 
    text-align: left; 
    margin-left: 3%; 

} 

p { 
    display: block; 
    clear: both; 
    float: left; 
    text-align: left; 
    margin-bottom: 10px; 

} 


div.container { 
    display: block; 
    float: left; 
    width: 100%; 
    height: 100%; 

} 

div#cont3 { 
    display: block; 
    float: left; 
    width: 100%; 
    height: 100%; 
    background-image: url("images/london_1920.jpg"); 
    background-size: cover; 
    -ms-behavior: url('backgroundsize.htc'); 
    background-repeat: no-repeat; 
    position: relative; 
} 


div#cont3 div.banner { 
    display: block; 
    float: right; 
    font-size: 12px; 
    font-size: 70%; 
    font-size: 1.1vmax; 
    width: 90%; 
    max-width: 60%; 
/* height: 80%; */ 
    margin-right: 5%; 
    margin-top: 5%; 
    background-color: white; 
    background-color: rgba(255,255,255,0.9); 
    padding-bottom: 20px; 

} 

Я возился с высоты, и добавляя размеры родительского контейнера, а за другие вопросы на этом форуме. Я также пытался бороться с негабаритными заголовками, но без радости. IE8 упрямо делает их слишком большими!

Может ли кто-нибудь определить, что я сделал неправильно? Благодаря

Answer 1

добавить это в вашем и посмотреть, если он работает

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]-->