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

IE8 div width float：响应站点的正确问题

1 个答案: