Internet Explorer在我的網站上做有趣的事情

Question

只是想知道是否有人可以幫助我弄清楚為什么我的菜單在IE中執行此操作，但是沒有其他瀏覽器...

這是我的CSS工作表中的代碼。.我不了解CSS / HTML，所以我不知道這里發生了什么。任何幫助將不勝感激。

/*===== header =====*/
header nav {
    float:right;
}
        header nav ul li {
            float:left;
        }
            header nav ul li a {
                font-size:22px;
                color:#fff;
                height:67px;
                line-height:67px;
                text-decoration:none;
                width:101px;
                text-align:center;
                float:left;
                background:#433b8f;
                background-image: gradient(top, #383282, #484095); /* FF3.6 */
                background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */
                background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */
        }
        header nav ul li a.current, header nav ul li a:hover {
            padding-bottom:5px;
        }

        header nav ul li:nth-of-type(2) a {
            background:#0184cd;
            background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
        }
        header nav ul li:nth-of-type(3) a {
            background:#7cbc19;
            background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
        }
        header nav ul li:nth-of-type(4) a {
            background:#ffbc00;
            background-image: -moz-linear-gradient(top, #ffb500, #ffc300); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffb500),color-stop(1, #ffc300)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300')"; /* IE8 */
        }
        header nav ul li:nth-of-type(5) a {
            background:#f07502;
            background-image: -moz-linear-gradient(top, #ee6c01, #f27f02); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ee6c01),color-stop(1, #f27f02)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02')"; /* IE8 */
        }
        header nav ul li:nth-of-type(6) a {
            background:#d00110;
            background-image: -moz-linear-gradient(top, #d00110, #da0116); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #d00110),color-stop(1, #da0116)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116')"; /* IE8 */
        }

這就是我在頁面上設置菜單的方式

<!-- header -->
  <header>
    <div class="container">
    <img src="images/logo.jpg" WIDTH="500" HEIGHT="60" alt="Smith Screenprint">
      <nav>
        <ul>
          <li><a href="index.html" class="current">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contacts.html">Contact</a></li>
          <li><a href="sitemap.html">Sitemap</a></li>
        </ul>
      </nav>
    </div>
    </header>

它是我正在為媽媽開發的網站：P這是地址，您可以在IE www.smithscreenprint.co.nz上查看其功能。

Answer 1

我將在這里忙個不停，假設您的問題是您的菜單項在IE 6、7和8版本中沒有接收到任何背景。這是因為:nth-of-type()選擇器是這些瀏覽器不支持（僅在IE9中），因此這些瀏覽器將忽略所有規則。 您正在嘗試為無法讀取其所屬選擇器的舊版瀏覽器應用背景規則。

如果您確實需要IE中的向后兼容性，則必須采用老式的方式，並為您指定id="menu-one" ， id="menu-two"等（或類似方式）菜單項。

Answer 2

這將有助於了解IE的版本以及“ Internet Explorer在我的網站上做有趣的事情”的含義。

我檢查了IE8，一切正常。 我認為您的問題出在IE7中。

IE的：nth-​​of-type（）支持不佳。 雖然，看來您正在使用Dean Edwards的IE9來解決此問題。

嘗試替換此：

header nav {
    float:right;
}

有了這個：

header img {
    float: left;
}