IE8 div寬度浮動：響應網站的正確問題

Question

我有一個div＃cont3，其中包含另一個div div.banner。 ＃cont3具有背景圖片。 div.banner只是一個帶有文本的白色浮動div。 它可以在IE8以外的任何地方使用-當然。 這就是它的含義：

這是在IE8中執行的操作：

div不會浮動，而且很瘦。 這是相關的html（div.container直接位於body標簽內）：

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