chrome和IE的css问题
这是我的问题,在Chrome和IE中,top raw乱七八糟,但在FF中运行良好, 演示页面: 这是我的csschrome和IE的css问题,css,internet-explorer,google-chrome,Css,Internet Explorer,Google Chrome,这是我的问题,在Chrome和IE中,top raw乱七八糟,但在FF中运行良好, 演示页面: 这是我的css /* */ body { background: #282425 url(../images/background.jpg) no-repeat top center; font-size:12px; } #myTable { width: 100%;overflow:hidden; } .wrapper { position:relative;
/*
*/
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
你不认为你可以在发布它之前把它浓缩一点吗
无论如何,在style.css中删除第80行的
float:left
将是解决这个问题的一个好的开始。基于您现在的现场站点,将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消息:
在doctype之前不能有任何内容,甚至不能有注释,否则IE将进入怪癖模式。你需要将此条件注释移动到你的
部分,IE才能正常运行。你为什么不在编辑上一个问题以反映你的持续问题,而不是打开一个新问题?事实上,这看起来有点像上一篇文章。你真的应该把这篇文章发表在这样的文章上,因为如果你在我运行工具时进行更改,那么调试你的问题会很困难。另外,一个很好的开发方法是在编写代码时在所有浏览器中进行测试,而不是在最后。我有一些建议,但在JSFIDLE中出现之前,我无法给出正确的答案。@Patric我现在停止了更改,FF fine Chrome IE buggy!我知道你已经找到了一个修复代码的方法,因为它看起来很好,就像一个提示一样,如果这是出于专业目的,你可能会想更改你的“秘密”。在我发布之前,你已经这样做了,这会导致chrome和FF中出现更多混乱,:)一切正常,我现在调整状态一切正常,@马可:很高兴我能帮上忙,但是你仍然需要移动有条件的评论,因为这会让IE进入怪癖模式,所以现在的布局看起来很糟糕。正如我上面所说,在doctype之前,您不能有任何内容。只需将其移动到
部分即可。
<script lang='javascript'>
<!--[if lte IE 6]>
window.location = "ie6dead.php";
<![endif]-->
</script>