chrome和IE的css问题答案

【问题标题】：css issue with chrome and IEchrome和IE的css问题
【发布时间】：2011-08-30 10:00:12
【问题描述】：

这是我的问题，在 Chrome 和 IE 中最原始的东西搞砸了，但在 FF 中工作正常，演示页面：http://sudanesetweeps.com/dev/index.php

这是我的CSS

/*

*/


body {
    background: #282425 url(../images/background.jpg) no-repeat top center;
    font-size:12px;
}

#myTable { width: 100%;overflow:hidden; }
.wrapper {
    position:relative;
    margin: 0 auto;
    width: 852px;
    padding: 25px 0;
}

/* header */
.header .logo {
    margin-bottom: 21px;
}
.header ul.nav {
    position:relative;
    list-style: none;
    margin:0;padding:0;
    color: #fcd770;
    background: url(../images/menu.png) no-repeat top left;
    overflow:hidden;
    height: 46px;
    font-size:15px;
}
    .header ul.nav li {
        float:left;
        position:relative;
        margin: 15px 0 0 20px;
    }
    .header ul.nav li a{
        color: #fcd770;
        text-decoration:none;
        font-weight:bold;
    }
.header .header_twitter {
    position:relative;
    height: 260px;
    background: url(../images/header_bg.png) no-repeat top left;
    color: #fff;
}
    .header .header_twitter .singin_twitter {
        position:absolute;
        bottom: 40px;
        right: 55px;
    }

/* middle */
.middle {
    position:relative;
    margin: 30px 0;
}
.middle a{
    color: #000;
}
    .middle .row_top {
        background: url(../images/table_top.png) no-repeat top left;
        overflow:hidden;
        color: #fcd770;
    }
    .middle .row {
        overflow:hidden;
        background: url(../images/table_middle.png) no-repeat top left;
        color: #000;
    }
    .middle .row_top .col1,
    .middle .row_top .col2,
    .middle .row_top .col3,
    .middle .row_top .col4,
    .middle .row_top .col5,
    .middle .row_top .col6,
    .middle .row_top .col7,
    .middle .row_top .col8{
        float:left;
        padding: 20px 0 18px;
        text-align:center;
    }
    .middle .row .col1,
    .middle .row .col5,
    .middle .row .col3,
    .middle .row .col4,
    .middle .row .col6,
    .middle .row .col7,
    .middle .row .col8{
        float:left;
        padding: 20px 0 0 0;
        text-align:center;
    }
    .middle .row .col2{
        padding: 7px 0 8px 0;
        float:left;
        text-align:center;
    }
    .middle .row .col1,
    .middle .row_top .col1{
        width: 98px;
    }
    .middle .row .col2,
    .middle .row_top .col2{
        width: 102px;
    }
    .middle .row .col3,
    .middle .row_top .col3{
        width: 146px;
    }
    .middle .row .col4,
    .middle .row_top .col4{
        width: 150px;
    }
    .middle .row .col5,
    .middle .row_top .col5{
        width:76px;
    }
    .middle .row .col6,
    .middle .row_top .col6{
        width:73px;
    }
    .middle .row .col7,
    .middle .row_top .col7{
        width:118px;
    }
    .middle .row .col8,
    .middle .row_top .col8{
        width:87px;
    }
    .middle .last {
        background: url(../images/table_bottom.png) no-repeat top left;
    }




/* footer */
.footer {

}
    .footer_top {
        height: 17px;
        background: url(../images/footer_top.png) no-repeat top left;
    }
    .footer_bottom {
        height: 17px;
        background: url(../images/footer_bottom.png) no-repeat top left;
    }
    .footer_content {
        background: #2b7fc3;
        color: #fff;
        width:851px;
        font-size:12px;
        text-align:center;
    }
        .footer_content a {
            color: #fcd770 ;
            font-size: 12px;

            text-decoration:none;
        }

这里是jquery table css demo_table_jui.css

我不能在这里跳过它，因为它太长了所以这里是代码链接

http://paste.ideaslabs.com/show/c1qqXYpf9i

【问题讨论】：

您为什么不编辑您在stackoverflow.com/questions/7231850/css-issue-with-firefox 的上一个问题以反映您持续存在的问题，而不是提出一个新问题？
事实上，这有点像stackoverflow.com/questions/7225002/… 上的另一篇博文。
您确实应该将其发布在jsfiddle.net 之类的地方，因为如果您在我运行工具时进行更改，则很难调试您的问题。此外，一个避免这种情况发生的好方法是在编写代码时在所有浏览器中进行测试，而不是在最后。我有一些建议，但是在 jsFiddle 中之前，我无法给出正确的答案。
@Patric 我现在停止了更改，FF 很好 Chrome IE buggy！
我看到您已经发现了代码的修复方法，因为它现在看起来还不错，就像您可能想要更改您的“秘密”一样，如果这是出于专业目的。

标签： css internet-explorer google-chrome

【解决方案1】：

根据您的实时站点，现在将float:left 添加到以下规则应该可以在 Chrome 中修复它，并且在 Firefox 中看起来仍然可以。

.middle .row {
    overflow: hidden;
    background: url(../images/table_middle.png) no-repeat top left;
    color: black;
    float: left; /* add this */
}

我无法在 IE 中进行测试。因为目前您在 doctype 之前发布了下面的代码，这会使 IE 进入怪癖模式，甚至迫使 IE9 看到您的 kill ie 消息：

<script lang='javascript'> 
    <!--[if lte IE 6]>
        window.location = "ie6dead.php";
    <![endif]-->
</script>

在你的 doctype 之前你不能有任何东西，甚至不能有评论，否则 IE 将进入怪癖模式。您需要将此条件注释移至您的 <head> 部分，以便 IE 正常运行。

【讨论】：

甜蜜一切工作正常，我现在调整条件一切正常，
@marco：很高兴我能帮上忙，但您仍然需要移动该条件注释，因为它会将 IE 置于怪异模式，所以现在布局看起来已损坏。正如我上面所说，在文档类型之前你不能有任何东西。只需将其移至<head> 部分即可。

【解决方案2】：

你认为在发布之前你不能把它简化一下吗？

无论如何，删除 style.css 中第 80 行的 float: left 将是解决此问题的良好开端。

【讨论】：

在我在这里发帖之前已经这样做了，这会导致 chrome 和 FF 更加混乱，:)