<main> CSS不適用於IE11

Question

因此，我的頁面在FireFox和Google Chrome上的運行情況絕對良好： http ： //www.cis130.net/bluehdoj/aboutsensitive

但是，我應用於主標簽的樣式根本不在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>

附言：這只是我為進入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 */

我還要補充一點，您不應該使用background-image，而只能使用background。

Answer 3

如果要漸變，則在50％處停止使用將無效50％！ 因為色標1在中間居中停在50％，而色標2在中間停在50％，所以您會看到兩個橙色和灰色的框，但是將其更改為0％和100％將為您提供完全平衡的漸變。 在此處檢查圖像。

要以視覺方式對其進行驗證，請檢查Microsoft本身的此鏈接，您可以在其中生成漸變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%);