问题与ie9和编译的LESS CSS

Question

这是我目前正在使用的LESS CSS。

ie9在此之后停止

#oo-terms, #oo-privacy, #fbpage, #termrewards, #panelerrorpage{
      #wrapper{
          height:100%;
          @media only screen and (max-width : 1020px) { width:95%; padding: 0 2.5%;}
          #content-wrapper{
              background:@light-grey;
              width:100%;
              max-width:1000px;
              margin-left:auto;
              margin-right:auto;
              -moz-box-shadow: 0px 0px 15px #636363;
              -webkit-box-shadow: 0px 0px 15px #636363;
              box-shadow: 0px 0px 15px #636363;
              -webkit-border-radius: 0px; 
              -moz-border-radius: 0px; 
              border-radius: 0px;
              position:inherit;
              margin-top:30px;
              display:block;
              @media only screen and (max-width : 1020px) {width:95%; padding: 5% 2.5%; }
              #facebookRegister, #facebookThankYou{
                  padding: 2.5%;
                  width: 95%;
                  color:@dark-blue;
                  clear:both;
                  .welcome{color:@dark-blue;}
                  div{
                      color:@dark-blue !important;
                      position:inherit !important;
                      top:0px;
                      left:0px;
                      h2{color:@dark-blue !important;}
                  }
                  .facebook-login-button{
                                    width:280px;
                                    float:none;
                                    position:inherit;
                                    margin:0px;
                                    padding:0px;
                                    background:#3b5999;
                                    height:36px;
                                    -webkit-border-radius: 0px; 
                                    -moz-border-radius: 0px; 
                                    border-radius: 0px;
                                    .facebook-login-mid{
                                        width:100%;
                                        padding: 0 0 0 0px;
                                        font-size:14px;
                                        line-height:36px;
                                        height:36px;
                                        -webkit-border-radius: 0px; 
                                        -moz-border-radius: 0px; 
                                        border-radius: 0px;
                                        background:url('/App_Presentation/panel/OpinionOutpost/img/oo-new-fbbg.png') no-repeat;
                                        background-position: 6px 0px;
                                        a{
                                            width: 237px;
                                            padding: 0 0 0 35px;
                                            display: block;
                                            background: 0;
                                            text-align: center;
                                            cursor: pointer;
                                            height: 36px;
                                        }
                                    }
                                }
                  .left{
                      width:45%; 
                      margin-right:5%; 
                      float:left; 
                      margin-top:50px;
                      @media only screen and (max-width : 700px) {width:100%; float:none; margin-right:0px;}

                  }
                  .right{
                      width:46%; 
                      float:right; 
                      margin-top:50px;
                      @media only screen and (max-width : 700px) {width:100%; float:none; margin-right:0px;}
                      input{
                        width:216px;
                        padding:0 10px 0 10px;
                        -webkit-border-radius: 0px; 
                        -moz-border-radius: 0px; 
                        border-radius: 0px; 
                        border: 1px solid #cdcdcd;
                        height:36px;
                        line-height:36px;
                        color:#cdcdcd;
                        margin-top:10px;
                        font-weight:normal;
                        margin-left:0px;
                        }
                        label{
                            display:none;
                        }
                        #fbSyncAccount{
                            background:@light-blue;
                            margin: 10px auto;
                            border:none;
                            color:#ffffff;
                        }
                      }
                  .right:after{clear:both;}
              }

          }
      }
}

我没有看到这个CSS的任何问题，我想知道IE9是否与这些类中的任何一个有任何冲突......

继承人真正的踢球者... IE8继续阅读CSS直到文档的底部。

这是后来发生的事情

#termrewards, #panelerrorpage{
    #content-wrapper{
        width:95%;
        padding:2.5%;
    }
}
input[type="text"], input[type="password"]{
    @media only screen and (max-width : 1024px) {font-size:16px !important; }
}
#rewardpage #wrapper #large-right p a{color:@light-blue;}
#modal-container .red-button-mid{background:@light-blue;}
#modal-container .red-button-mid:hover{background:@light-blue;}
.facebook-login-button{
    position:relative;
    img{
        position:absolute;
        right:6px;
        top:6px;
    }
}

Answer 1

如果你正在处理很多选择器，你可能会遇到这样的问题：

Internet Explorer 9及更低版本无法从单个CSS文件处理超过4,095个选择器。任何其他选择器都将被忽略。

您的解决方案可能是这样的：http://blesscss.com/