<main> CSS 不适用于 IE11

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。这只是我一直在为我的网络开发 class 做的一个小任务，可以按原样提交，但我是一个完美主义者，而且我想知道将来如何避免这个问题。

Answer 1

这是一个完全兼容浏览器的渐变示例。您可以修改此示例以创建渐变。

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 2

在 IE SOURCE

中不支持

尝试HTML5 shiv

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

Answer 3

如果你想要渐变，那么使用停止在 50% 50% 是行不通的！因为色标 1 在 50% 停止，而色标 2 在中间的 50% 开始，所以你会看到两个橙色和灰色的框，但是将它更改为 0% 和 100% 会给你完全平衡的渐变。Check the image here.

要直观地验证它，请从 Microsoft 本身查看此 link，您可以在其中生成渐变 http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html 或查看以下代码：

/* 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%);

<main> CSS 不适用于 IE11

<main> CSS not applying in IE11

html

css

internet-explorer-11