IE很讨厌我的CSS文件,所以我没有内容!

时间:2011-01-27 12:06:52

标签: css internet-explorer web internet-explorer-8 internet-explorer-9

我的网站似乎与其他所有更加漂亮但IE8,IE9和兼容模式一样正常工作!!

一旦我禁用我的CSS,我就会看到内容,但是当它重新打开时,我什么都没得到!

这是我的地狱。

这是我的CSS:

    body {
        background: center top url(./images/background.jpg) no-repeat;
        background-color: #FFF;
        margin: 0px;
    }

    body,td,th {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: bold;
        color: #8e8f91;
    }

    h1 {
        font-size: 12px;
        color: #FFFFFF;
        text-transform: uppercase;
        line-height: normal;
        margin: 0;
        padding: 0;
        letter-spacing: 1px;
    }

    #Table_01 {
        top:0px;
        width:1200px;
        margin: 0 auto;
    }

    .backing {
        background: repeat transparent url(./images/backing.png);
        padding: 4px;
        margin-left: 4px;
        margin-top: 443px;
        width: 130px;
        text-transform: uppercase;
        color: #FFF;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .backing a, a:active {
        text-decoration: none;
        color: #FFFFFF;
    }

    .backing a:hover {
        text-decoration: underline;
        color: #FFFFFF;
    }

    .snipet {
        background: repeat transparent url(./images/backing.png);
        padding: 4px;
        margin: 4px;
        width: 100px;
        text-transform: uppercase;
        color: #FFF;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .snipet_text {
        font-size: 12px;
        font-style: italic;
        font-weight: normal;
        letter-spacing: 0px;
        line-height: 18px;
    }

    .snipet_container {
        margin: 10px;
    }

    a, a:active {
        text-decoration: underline;
        color: #8e8f91;
    }

    a:hover {
        text-decoration: none;
    }

    a img {
    border:none;
    }

    .clear {
    clear:both;
    }

    ul.menu {
        list-style:none;
        margin: 0;
        padding: 0;
    }

    ul.menu li {
        width:auto;
        height:29px;
        margin-left: 1px;
    }

    ul.menu li a {
        display:block;
        position:relative;
    }

    ul.menu li a img {
        position:absolute;
        z-index:1;
    }

    ul.menu li span {
        display:block;
        height: 29px;
        width: auto;
        position:absolute;
        z-index:2;
    }

    /* TABLES */

    div.index-1_ {
        position:absolute;
        left:0px;
        top:0px;
        width:1200px;
        height:17px;
    }

    div.index-2_ {
        position:absolute;
        left:0px;
        top:22px;
        width:33px;
        height:675px;
    }

    div.index-3_ {
        position:absolute;
        left:33px;
        top:22px;
        width:208px;
        height:221px;
    }

    div.index-4_ {
        position:absolute;
        left:241px;
        top:22px;
        width:12px;
        height:675px;
    }

    div.index-5_ {
        position:absolute;
        left:254px;
        top:22px;
        width:82px;
        height:29px;
    }

    div.index-6_ {
        position:absolute;
        left:335px;
        top:22px;
        width:10px;
        height:43px;
    }

    div.index-7_ {
        position:absolute;
        left:346px;
        top:22px;
        width:102px;
        height:29px;
    }

    div.index-8_ {
        position:absolute;
        left:447px;
        top:22px;
        width:11px;
        height:43px;
    }

    div.index-9_ {
        position:absolute;
        left:459px;
        top:22px;
        width:77px;
        height:29px;
    }

    div.index-10_ {
        position:absolute;
        left:535px;
        top:22px;
        width:10px;
        height:43px;
    }

    div.index-11_ {
        position:absolute;
        left:546px;
        top:22px;
        width:87px;
        height:29px;
    }

    div.index-12_ {
        position:absolute;
        left:632px;
        top:22px;
        width:10px;
        height:43px;
    }

    div.index-13_ {
        position:absolute;
        left:643px;
        top:22px;
        width:73px;
        height:29px;
    }

    div.index-14_ {
        position:absolute;
        left:715px;
        top:22px;
        width:485px;
        height:43px;
    }

    div.index-15_ {
        position:absolute;
        left:253px;
        top:46px;
        width:82px;
        height:14px;
    }

    div.index-16_ {
        position:absolute;
        left:345px;
        top:46px;
        width:102px;
        height:14px;
    }

    div.index-17_ {
        position:absolute;
        left:458px;
        top:46px;
        width:77px;
        height:14px;
    }

    div.index-18_ {
        position:absolute;
        left:545px;
        top:46px;
        width:87px;
        height:14px;
    }

    div.index-19_ {
        position:absolute;
        left:642px;
        top:46px;
        width:73px;
        height:14px;
    }

    div.index-20_ {
        position:absolute;
        left:253px;
        top:60px;
        width:1px;
        height:481px;
    }

    div.index-21_ {
        position:absolute;
        left:254px;
        top:60px;
        width:249px;
        height:470px;
        background-image: url(./images/projects/HomeProject001.jpg);
    }

    div.index-22_ {
        position:absolute;
        left:503px;
        top:60px;
        width:618px;
        height:442px;
        background-color: #CBCBCB;
    }

    div.index-23_ {
        position:absolute;
        left:1121px;
        top:60px;
        width:79px;
        height:632px;
    }

    div.index-24_ {
        position:absolute;
        left:33px;
        top:238px;
        width:208px;
        height:67px;
    }

    div.index-25_ {
        position:absolute;
        left:503px;
        top:502px;
        width:606px;
        height:16px;
        background-image: url(./images/index-25.png);
        padding:6px;
    }

    div.index-26_ {
        position:absolute;
        left:254px;
        top:530px;
        width:867px;
        height:11px;
    }

    div.index-27_ {
        position:absolute;
        left:253px;
        top:541px;
        width:619px;
        height:151px;
        background-color: #FFF;
    }

    div.index-28_ {
        position:absolute;
        left:872px;
        top:541px;
        width:249px;
        height:151px;
        background-image: url(./images/index-28.png);
    }

    /* sliding panel */
    /***** clearfix *****/
    .clear {clear: both;height: 0;line-height: 0;}
    .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    .clearfix {height: 1%;}
    .clearfix {display: block;}

    #toppanel {
        position: absolute;   /*Panel will overlap  content */
        /*position: relative;*/   /*Panel will "push" the content down */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
    }

    #panel {
        width: 100%;
        height: 280px;
        color: #333;
        background: transparent url(images/tab_bk.png) repeat;
        overflow: hidden;
        position: relative;
        z-index: 3;
        display: none;
    }

    #panel h1 {
        font-size: 1.6em;
        padding: 5px 0 10px;
        margin: 0;
        color: #15ADFF;
        text-align: left;
    }

    #panel h2{
        font-size: 1.2em;
        padding: 10px 0 5px;
        margin: 0;
        color: #e01000;
        text-align: left;
    }

    #panel p {
        margin: 5px 0;
        padding: 0;
    }

    #panel a {
        text-decoration: underline;
        color: #333;
    }

    #panel a:hover {
        color: #666;
    }

    #panel a-lost-pwd {
        display: block;
        float: left;
    }

    #panel ul {
        margin: 0 0 5px 0;
        padding: 0;
        line-height: 1.6em;
        list-style: none;
    }

    #panel .content {
        width: 960px;
        margin: 0 auto;
        padding-top: 15px;
        text-align: left;
        font-size: 0.85em;
    }

    #panel .content .left {
        width: 280px;
        float: left;
        margin-bottom: 25px;
        padding: 0 15px;
        min-height: 220px;
    }

    #panel .content .border {
        border-left: 1px solid #333;
    }

    #panel .content .narrow {
        width:1000px !important;
    }

    #panel .content form {
        margin: 0 0 10px 0;
    }

    #panel .content label {
        padding-top: 8px;
        clear: both;
        width: 280px;
        display: block;
    }

    #panel .content input.field {
        border: 1px #1A1A1A solid;
        background-color: #efefef;
        margin-right: 5px;
        margin-top: 4px;
        width: 300px;
        color: white;
        height: 16px;
    }

    #panel .content input:focus.field {
        background: #ccc;
    }

    #panel .content .ui-state-highlight .ui-icon {background-image: url(./images/icon_sprite.png); width: 16px; height: 16px; margin-top: -2px;}
    #panel .content .ui-state-error .ui-icon, #panel .content .ui-state-error-text .ui-icon { background: url(./images/icon_sprite.png) -16px 0 no-repeat !important; width: 16px; height: 16px; margin-top: -2px;}

    #panel .content .ui-state-highlight { border: 1px solid #d2dbf4; background: #f4f8fd; color: #0d2054; }
    #panel .content .ui-state-error { border: 1px solid #e2d0d0; background: #fcf0f0; color: #280b0b;}

    /* BUTTONS */
    #panel .content .ui-button {
        outline: none;
        color: #1c4257;
        border-color: #7096ab;
        display: block;
        font-size: 14px;
        font-weight: bold;
        border: thin solid;
        margin-top: 20px;
        padding: 4px 20px 4px 20px;
    }

    #panel .content .ui-button:hover {
        background: #fbc900;
    }

    /* Panel Tab/button */
    .tab {
        height: 25px;
        position: relative;
        top: 0;
        z-index: 999;
    }

    .tab ul.login {
        display: block;
        position: relative;
        float: right;
        clear: right;
        width: auto;
        font-weight: bold;
        line-height: 25px;
        margin: 0;
        right: 150px;
        color: white;
        font-size: 80%;
        text-align: center;
    }

    .tab ul.login li.left {
        background: url(images/tab_l.png) no-repeat left 0;
        height: 25px;
        width: 30px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
    }

    .tab ul.login li.right {
        background: url(images/tab_r.png) no-repeat left 0;
        height: 25px;
        width: 30px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
    }

    .tab ul.login li {
        text-align: left;
        padding: 0 6px;
        display: block;
        float: left;
        height: 25px;
        background: url(images/tab_m.png) repeat-x 0 0;
    }

    .tab ul.login li a {
        color: #15ADFF;
    }

    .tab ul.login li a:hover {
        color: #333;
    }

    .tab .sep {color:#666}

    .tab a.open, .tab a.close {
        height: 20px;
        line-height: 20px !important;
        padding-left: 30px !important;
        cursor: pointer;
        display: block;
        width: 100px;
        position: relative;
        top: 2px;
    }

    .tab a.open {background: url(images/bt_open.png) no-repeat left 0;}
    .tab a.close {background: url(images/bt_close.png) no-repeat left 0;}
    .tab a:hover.open {background: url(images/bt_open.png) no-repeat left -19px;}
    .tab a:hover.close {background: url(images/bt_close.png) no-repeat left -19px;}

我知道这有点乱......抱歉:(

2 个答案:

答案 0 :(得分:4)

如何确定错误:

  1. 从样式表中删除所有类。
  2. 逐个添加课程。
  3. 查看失败的时间/地点
  4. 修复/解决错误
  5. 如果不是最后,请继续执行第2步

答案 1 :(得分:2)

    #panel {
        width: 100%;
        height: 280px;
        color: #333;
        background: transparent url(images/tab_bk.png) repeat;
        overflow: hidden;
        position: relative;
        z-index: 3;
        display: none;
    }

虽然DIV实际上已关闭,但出于某种原因,IE完全忽略了它! 这就是问题所在:

        display: none;

所以我所做的就是将DIV放在页脚中。它仍然让我感到困惑,为什么它只是在IE中做它!!