Question

我正在学习响应式设计。直到现在我只知道一些事情并面临一个问题。

我制作了3个弹性框，但是当我尝试在Internet Explorer 9或更低版本上查看它时，一切都会中断，并且框没有正确显示！

如何解决此问题？这是我在CodePen上的代码：

＆＃13;

<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
* { margin:0; padding:0; border:0; }
body { color: #535353; background: #e7e7e7; }
#container { background-color:green; width: 80.83%; margin: 0 auto; }
#header { color: #e8e8e8; background: #5e5e5e; padding: 5px 8px; }
.ptext {
    font-size: 1em;
    line-height: 1.20em;
    margin: 1em 1em 1em 1em;
    text-align: justify;
}

.containerbox {
    font-size: 14px;
    display: flex;   
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.containerbox > div {

    vertical-align: top;
    width: 33.33%;
    border: 1px solid grey;
    box-sizing: border-box;
    text-align: center;
    border-radius:5px;
    margin:5px;
    background-color:silver;
}

@media (max-width: 996px) {
    .containerbox {
        display: block;
        width: 100%;
        margin:0px;
    }
}

@media (max-width: 996px) {
    .containerbox > div {
        display: block;
        width: 100%;
        margin:0px;
    }
}

@media (max-width: 996px) {
    #header {
        text-align: center;
    }
}

</style>


</head>
<body>
  <div id="container">

    <div id="header">
      <h1>Test 3 flex boxes</h1>
    </div>

    <div id="main">

      <div class="containerbox">
        <div><p class="ptext">Lorem ipsum dolor sit amet, consectetur      adipiscing elit. Ut urna justo, codetium at malesuada a.</p></div>
        <div><p class="ptext">Lorem ipsum dolor sit amet, consectetur      adipiscing elit. Ut urna justo, codetium at malesuada a.</p></div>
        <div><p class="ptext">Lorem ipsum dolor sit amet, consectetur      adipiscing elit. Ut urna justo, codetium at malesuada a.</p><</div>
      </div>

    </div>

  </body>
</html>

＆＃13;

http://codepen.io/anon/pen/RoNzNO

请给我一些解决方法，我可以在IE9中修复它。

如何让3个弹性盒在IE9上工作？

0 个答案: