<main> CSS未在IE11中应用</main>

Question

所以我的网页在FireFox和Google Chrome上运行得非常好：http://www.cis130.net/bluehdoj/aboutresponsive

但是，我应用于主标签的样式根本不会发生在IE11中。我尝试为线性渐变添加-ms-但它似乎没有改变任何东西。如果有人能帮我解决这个问题，我会非常感激。

以下是代码：

main {
    margin: 0 auto;
    padding-top: 5em;
    max-width: 1000px;
    background-image: linear-gradient(to right, #6E6E6E 50%, #F90 50%);
    background-image: -ms-linear-gradient(to right, #6E6E6E 50%, #F90 50%);
    min-height: 100%;
    overflow: auto;
    zoom: 1;
}

和html：

<main>
        <div class="leftCol">
            <h2>Color Scheme Changer</h2>
            <div class="button" id="changeScheme"></div>
            <p>Whatever you do, don't click this button. It's seriously wicked evil. Like the Dirty Bubble, Man-Ray, and Barnacle Boy AKA Every Villian is Lemons evil.</p>
        </div><!--Ends left column-->

        <div class="rightCol">
            <h2>Mirror Mode Button</h2>
            <div class="button" id="mirrorMode"></div>
            <p>This button, however, is pure good. It once saved a bunch of puppies from a burning building. I would highly suggest pressing it.</p>
        </div><!--Ends right column-->
    </main>

P.S。这只是一个小小的任务，我一直在努力进入web开发课，并且可以按原样提交，但我是一个完美主义者加上我想知道如何在将来避免这个问题。

Answer 1

IE SOURCE

中不支持

尝试HTML5 shiv

<!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 2

以下是完全兼容浏览器的渐变示例。您可以将其修改为示例以创建渐变。

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

我还想补充一点，你不应该使用背景图片，而只是背景。

Answer 3

如果你想要渐变，那么使用50％50％的止损将无法工作！因为颜色停止1停在50％，停止2从中间50％开始，所以你看到两个橙色和灰色的盒子，但是将它改为0％和100％会给你完全平衡的渐变。{{3} }

要进行直观验证，请检查Microsoft本身的此链接，您可以在其中生成渐变Check the image here.或检查以下代码：

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);

/* Opera */ 
background-image: -o-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, right top, left top, color-stop(, #6E6E6E), color-stop(1, #FF9900));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to left, #6E6E6E 0%, #FF9900 100%);