Question

我正在尝试实现此处描述的圣杯布局：http://colintoh.com/blog/display-table-anti-hero

除了IE之外，它的工作非常出色。我在IE9上进行了测试，根据这个网站支持：http://caniuse.com/#feat=css-table

但是，我的侧边栏出现在我的主要内容的上方和下方。

这是骨架html：

<body>
<div class="wrapper">
   <div class="header">HEADER</div>
   <div class="main">
    <div class="column sidebar"></div>
    <div class="column content">Main Content</div>
    <div class="column sidebar"></div>
  </div>
  <div class="footer">FOOTER</div>
</div>
</body>

和css：

  body {
      background: #FFF;
      color: black;
    }
    .wrapper {
      height: 100%;
      display: table;
      width: 100%;
      text-align: center;
    }

    .header {
      display: table-row;
      height: 1px;
    }

    .main {
      height: 100%;
      display: table;
      width: 100%;
    }

    .column {
      display: table-cell;
    }

    .sidebar {
      width: 10%;
    }

    .footer {
      display: table-row;
      height:1px;
    }

为什么这个据称支持的布局在IE9中不起作用？

Answer 1

我在我的部分顶部添加了以下标记并修复了它。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

css display：table - 与ie的兼容性问题

1 个答案: