IE8 div Breite float: richtige Ausgabe für responsive Website

Question

Ich habe ein div, # cont3, enthält ein anderes div, div.banner. # cont3 hat ein Hintergrundbild. div.banner ist nur ein weißes Floating Div mit Text drin. Es funktioniert überall außer IE8 - natürlich. Dies ist, was es soll aussehen:

Das ist, was sie tut in IE8:

Die div schwimmt nicht und ist super-dünn. Hier ist der relevante html (div.container ist direkt im Körper Tags):

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

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

} 

Ich habe mit Höhe Hantieren und das Hinzufügen von Dimensionen zu den übergeordneten Container, wie zu anderen Fragen in diesem Forum. Ich habe auch versucht, die übergroßen Überschriften, aber keine Freude anzugehen. IE8 macht sie stur zu groß!

Kann jemand feststellen, was ich falsch gemacht habe? Dank

Answer 1

fügen Sie diese in Ihrem und sehen, ob es funktioniert

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