Question

我在自定义Wordpress主题项目中使用Bourbon Neat和Bitters。编写了布局后，我很难让它在IE中看起来正确

A working example using a static site with the same markup.

SCSS概述：

@import "bourbon/bourbon";
@import "bitters/bitters";
@import "neat/neat";

@import "mixins"; 


html {
    background: #064831 url('img/Page-BG-Grad-1800.jpg') repeat-y top center;
    background-size: 120%;
    padding: {
            left: 3%;
            right: 3%;
        }
    margin: 0;
        @include media ($mobile) { 
            background-image: none;
            background: #fff;
            padding: {
                left: 0;
                right: 0;
            }
        }
}

body {
    @include outer-container;
    margin: 0 auto;
    background: #fff;

}

.wrapper {
    @include outer-container;
    display: block;
    width: 80%;
    max-width: 80%;
    margin: 0 auto;

    @include media ($tablet) {
        width: 95%;
        max-width: 95%;
    }
    @include media ($desktop) {
        width: 87%;
        max-width: 87%;
    }

}



    .left-column {
        @include span-columns(6);
    }
    .right-column {
        @include span-columns(6);
        @include omega;
    }

从Wordpress输出的标记：

<body class="home page page-id-2 page-template page-template-template-home-page-php logged-in" >

    <div class="wrapper">
        <div class="highlight">
            <p><strong>LATEST NEWS:</strong></p>
        </div>

        <section class="left-column">
            <p>Column 1</p>
        </section>

        <section class="right-column">
            <p>Column 2</p>
        </section>

    </div>

</body>

Span-Columns在IE9中不起作用

0 个答案: