IE8 div width float：レスポンシブサイトの正しい問題

Question

div＃cont3に別のdiv div.bannerが含まれています。 ＃cont3には背景画像があります。 div.bannerは、テキストを含む白い浮動小数点型のdivです。もちろん、IE8はどこでも動作します。

div要素が浮いていないと、スーパースキニーです：

これは、それがIE8で何をするかである：これは、それが見えるように意図しているものです。

<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; 

} 

私は高さをいじると、親コンテナに寸法を追加してきたように、ここでは、関連するHTML（div.containerは、bodyタグ内で直接では）ですこのフォーラムの他の質問ごとに。私はまた、特大の見出しに取り組もうとしていますが、喜びはありません。 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]-->