firefox的css问题
firefox的css问题
提问于 2011-08-29 22:56:23
我有一个在FireFox上正确加载CSS的问题。页面内容从Db正确加载。当它出现在展示舞台上时，页面在Firefox中会变得一团糟，而在Chrome和IE中运行得很好。我在chrome上也遇到了同样的问题，我通过添加了。
#myTable { width: 100%;overflow:hidden; }但这对FF一点帮助都没有。我怀疑当Firefox试图加载javascript时会发生这种情况，然后CSS就会变得混乱。这是我的CSS和演示页面
http://sudanesetweeps.com/dev/index.php
/*
*/
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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2011-08-29 23:44:26
这个问题是由于html中的<colgroup>和表格元素的css的组合造成的。最简单的解决方法是删除<colgroup>，因为在这种情况下不需要它。你的网站看起来仍然是你想要的样子。
编辑:在进一步的调查中，似乎<colgroup>是由您的JavaScript生成的。如果你禁用JavaScript并在火狐中刷新你的页面，你会看到它是正常的。我相信它是由jquery.tablesorter.min.js生成的。
我建议使用不同的表分页插件。我在表格分页方面没有太多经验，但我会在google上尝试一些可用的插件。这个one看起来很有趣。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7231850
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号