IE9隨機的CSS問題

Question

我目前在IE9中調試我的網站，我遇到了一個視圖怪癖，主要是與運行在網站頂部的導航欄有關，

當你看http://mensclothingroom.factoryagency.co.uk導航很好，但如果你看看http://mensclothingroom.factoryagency.co.uk/category/socks導航部分堆疊，這真的很混亂因為他們運行相同的CSS，也就是特定的樣式表。

CSS

.navigation {
    position:absolute;
    top:69px;
    left:5px;
    padding:0px 0px 0px 4px;
    border-bottom:1px solid #ccc;
}

    .navigation .site_navigation {
        padding:7px 0px 7px 0px;
        clear:both;
    }

        .navigation .site_navigation ul {
            height: 34px;
            line-height: 34px;

        }

            .navigation .site_navigation li {
                float: left;
                height: 16px;
                margin-right: 15px;
                position: relative;
            }

                .navigation .site_navigation li > ul {
                    display:none;
                    width:165px;
                    position:absolute;
                    left:0px;
                    top:34px;
                    background:#fff;
                    border:1px solid #aaa;
                    z-index:999;
                    height:auto;
                    padding:2px 0px
                }

                    .navigation .site_navigation li:hover > ul {
                        display:block;
                        box-shadow: 2px 2px 2px #999999;
                    }

                    .navigation .site_navigation li:hover > ul li > ul {
                        display:none;
                    }

                        .navigation .site_navigation li:hover > ul li,
                        .sidebar_navigation li {
                            line-height:11px;
                            clear:both;
                            display:block;
                            margin-bottom:2px;
                            width:140px;
                        }

                            .navigation .site_navigation li:hover > ul li {
                                height: auto !important;
                                line-height: normal;
                            }

                            .navigation .site_navigation li:hover > ul a,
                            .sidebar_navigation a {
                                font-size:10px;
                                padding:6px 0 6px 10px;
                                width:130px;
                                display:block;
                            }

                                .navigation .site_navigation li:hover > ul a {
                                    width:155px;
                                }

                                .navigation .site_navigation li > ul a:hover,
                                .navigation .site_navigation li:hover > a,
                                .sidebar_navigation a:hover {
                                    font-size:10px;
                                    background:#999;
                                    color:#fff;
                                }

                                    .navigation .site_navigation li:hover > a {
                                        font-size:12px;
                                    }


                .navigation .site_navigation li.sale {
                    float: right;
                    height: 25px;
                    line-height: 25px;
                    margin-right: 4px;
                }

                    .navigation .site_navigation li.sale a {
                        background:#BE1E2D;
                        height:16px;
                        color:#fff;
                        padding:4px 18px;
                    }

                        .navigation .site_navigation li a.sale {
                            display:block;
                            height:25px;
                        }

                        .navigation .site_navigation li.current a.sale {
                            background:#9C1925;
                        }

                .navigation .site_navigation li  a,
                .sidebar_navigation a {
                    color: #666666;
                    font-family: Georgia,Times,"Times New Roman",sans-serif;
                    font-size: 12px;
                    letter-spacing: 0.05em;
                    text-decoration: none;
                    text-transform: uppercase;
                }

                    .navigation .site_navigation li a {
                        display: block;
                        padding: 0 10px;
                    }

                        .navigation .site_navigation li > ul a {
                            padding:0px 0px 0px 12px;
                        }

                        .navigation .site_navigation li a:hover,
                        .navigation .site_navigation li.current a {
                            background:#aaa;
                            color:#fff;
                        }

IE CSS

  .navigation .site_navigation {
    padding:10px 0px 0px 0px;
}

.navigation .site_navigation li {
    list-style:none outside none;
    margin-right:15px;
    float:left;
    height:auto;
}

任何人都可以解決這個問題嗎？

Answer 1

在W3C HTML Validator中查看它...

您的第一個鏈接沒有雜散的HTML標記。

您的第二個鏈接有許多雜散/缺失標記 ，這可能會導致某些瀏覽器出現渲染問題。

• 第124行，第9列：雜散結束標記ul。

• 第302行，第11列：范圍內沒有li元素，但看到了li結束標記。

• 第319行，第7列：看到的身體的結束標記，但是有未閉合的元素。

• 第31行，第34列：未閉合的元素div。