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。