2012-04-19 58 views
0

我目前debuggig我的网站在IE9和我来跨越视图主要怪癖与在顶部网站的运行导航栏做,IE9随机CSS问题

当你看http://mensclothingroom.factoryagency.co.uk的nav很好,但是如果你再看看http://mensclothingroom.factoryagency.co.uk/category/socks这个nav部分堆栈,这是非常令人困惑的,因为它们运行相同的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; 
} 

任何人都可以揭示该问题的任何轻?

+1

你可以把你的CSS只是导航链接 – Kamal 2012-04-19 15:11:17

+1

HTML是否正确验证你选择的'doctype'? [我看到很多杂志标签](http://validator.w3.org/check?uri=http%3A%2F%2Fmensclothingroom.factoryagency.co.uk%2Fcategory%2Fsocks%2F&charset=%28detect+automatically%29&doctype=内联&组= 0),这可能会导致渲染问题取决于浏览器。 – Sparky 2012-04-19 15:13:33

+0

按照@ Sparky672的建议。验证您的HTML并确保您修复了所有错误。在此之前,尝试找出问题所在是浪费时间。 – 2012-04-19 15:19:27

回答

2

W3C HTML Validator看着它......

first link无杂散HTML标签。

您的second link has lots of stray/missing tags这可能会导致某些浏览器出现渲染问题。

  • 124行,第9列:杂散结束标签ul。

  • 行302,第11列:没有li元素在作用域中,但看到了li end标签。

  • 319行,第7列:看到的身体结束标签,但有未封闭的元素。

  • 第31行,第34列:未封闭的元素div。

+2

直到今天,我从来没有想过验证你的代码是重要的,经验教训,时间停止这么草率! – Udders 2012-04-19 15:35:30

+1

@ sico87,很高兴为您提供帮助。当你有多余的标签或标签丢失时,浏览器不知道该怎么做。有些人做出了一个很好的猜测,可能会起作用......其他人(IE)可能不会。 – Sparky 2012-04-19 15:38:29