Question

我有以下代码，我想知道是否有任何方法使其与IE9兼容。

我们的想法是让两列具有相同的高度（取同一行中最高项目的高度），并将一个内容放在其中一列的底部。

[class*=col_]{
float:left;position:relative;min-height:1px;margin:0;background-color:lime;}
.col_16{width:66.666666666667%;}
.col_8{width:33.333333333333%;}
.flex {
    display: flex;
    item-align: stretch;
}
.container-title {
    background-color:blue;
    height: 100%;
    position: relative;
    width: 100%;
}
.content-title {
    background-color:red;
    position: absolute;
    bottom: 0; width: 100%;
}

<div class="flex">
    <div class="col_8">
        <div class="container-title">
            <div class="content-title">
                <p>left content</p>
                <p>left content</p>
                <p>left content</p>
                <p>left content</p>
            </div>
        </div>
    </div>
    <div class="col_16">
        <p>right content</p>
        <p>right content</p>
        <p>right content</p>
        <p>right content</p>
        <p>right content</p>
        <p>right content</p>
        <p>right content</p>
        <p>right content</p>
    </div>
</div>

Answer 1

不是让它兼容，也可能不容易（可能不容易），它可能是检查/检测IE版本，然后专门为您的问题加载单独的样式表的选项

  <head>
  <!--[if lt IE 10]>
  <link rel="stylesheet" type="text/css" href="ie9-and-down.css" />
  <![endif]-->

小于，如果您只想定位ie9，可以更改它，它比尝试使用js更简单。 http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

我怎样才能在ie9中得到这个？

1 个答案: