0

我目前在 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;
                        }

浏览器 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;
}

任何人都可以阐明这个问题吗？

4

1 回答 1

2

在W3C HTML Validator中查看它...

您的第一个链接没有杂散的 HTML 标记。

您的第二个链接有很多杂散/缺失的标签，这可能会导致某些浏览器出现渲染问题。

  • 第 124 行，第 9 列：杂散结束标记 ul。

  • 第 302 行，第 11 列：范围内没有 li 元素，但看到了 li 结束标记。

  • 第 319 行，第 7 列：看到正文的结束标签，但有未闭合的元素。

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

于 2012-04-19T15:20:02.520 回答