我是编码的新手，并且在路上遇到了我的第一次碰撞。我一直在寻找两天的答案，到目前为止我所看到的并不是唯一一个，但我尝试使用或添加了一些我见过的人使用的技术，此时我很难过。
我的问题只出现在firefox中，在IE和Chrome中显示效果非常好。我已经创建了一个比较图表，我的表似乎被推向上方错位所有单元格。我尝试将宽度更改为100％，我使用CSS重置，因此填充和边距从一开始就设置为零，我也尝试过边距。请帮助我在下面附上我的代码，我有一个屏幕截图，但不能附加，因为我是新的。
我在Windows 7操作系统上使用firefox 15.0版
我的HTML，我可以添加更多需要的
<div id="tblCenter">
<table class="contItems">
<tr>
<td class="yes"><div class="row1"></div></td>
<td class="yes"><div class="row2"></div></td>
<td class="yes"><div class="row1"></div></td>
</tr>
<tr>
<td class="yes"><div class="row1"></div></td>
<td class="yes"><div class="row2"></div></td>
<td class="yes"><div class="row1"></div></td>
</tr>
<tr>
<td class="yes"><div class="row1"></div></td>
<td class="yes"><div class="row2"></div></td>
<td class="yes"><div class="row1"></div></td>
</tr>
<tr>
<td class="yes"><div class="row1"></div></td>
<td class="yes"><div class="row2"></div></td>
<td class="yes"><div class="row1"></div></td>
</tr>
<tr>
我页面的表格和设计部分的CSS
`@charset“utf-8”; / * CSS Document * /
#seoBox{
width: 950px;
margin: auto;
padding: 0px;
`enter code here`}
#seoContent{
margin: 25px 10px 25px 5px;
}
#seoContent h1 p tr td{
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
#seoContent p{
padding: 0 0 10px 0;
}
#seoContent #bulletPoint{
width: 500px;
padding: 20px 20px 0 20px;
}
#seoContent #bulletPoint ul{
display: block;
list-style-type:none;
}
#bulletPoint li{
background: url(../styleImages/Star.png) top left no-repeat ;
padding: 0 0 7px 25px;
}
#packages{
width: 935px
}
#sideBar{
width: 190px;
float: left;
margin-top: 92px;
font-weight:bold;
}
#sideBar td{
height: 25px;
padding: 8px 0 0 0;
background: url(../styleImages/tbl_line_lght.png) bottom left no-repeat;
}
#mainTbl{
width: 664px;
text-align: center;
}
#mainTbl .contItems{
border-collapse:collapse;
margin-top: 0px;
font-weight: bold;
font-size: 16px;
}
.contItems td{
width: 220px;
height: 25px;
padding-top: 8px;
}
.row1{
width: 167;
height: 3px;
background:url(../styleImages/tbl_line_lght.png) no-repeat;
position: relative;
bottom: -12px;
left: 20px;
}
.textR1{
width: 167;
height: 3px;
background:url(../styleImages/tbl_line_lght.png) no-repeat;
position: relative;
bottom: -20px;
left: 20px;
}
.row2{
width: 167;
height: 3px;
background: url(../styleImages/tbl_linedrk.png) no-repeat;
position: relative;
bottom: -12px;
left: 20px;
}
.textR2{
width: 167;
height: 3px;
background:url(../styleImages/tbl_linedrk.png) no-repeat;
position: relative;
bottom: -20px;
left: 20px;
}
.contItems .yes{
text-align: center;
background: url(../styleImages/green_yes.png) center center no-repeat;
}
.contItems .no{
text-align: center;
background: url(../styleImages/red_no.png) center center no-repeat;
}
#packbg{
width: 730px;
height: 1100px;
background: url(../styleImages/tblbg.png) top left repeat-x;
float:left;
margin-bottom: 50px;
}
#tblTop, #tblCenter, #tblRibbon, #tblBottom{
margin-left: 25px;
}
#tblTitle{
width: 535px;
height: 50px;
margin-left: 80px;
background: url(../styleImages/Tbl_title.png) bottom left no-repeat;
}
#tblTop{
width: 665px;
height: 40px;
background: url(../styleImages/tbl_top.png) no-repeat top left;
}
#tblCenter{
width: 665px;
height: 910px;
background: url(../styleImages/tbl_center.png) repeat-y top left;
}
#buyButton {
margin-left: 35px;
width:650px;
height: 42px;
}
.buyNow{
width: 121px;
height: 42px;
background: url(../styleImages/Buy_Now.jpg) top center no-repeat;
border: 0px;
margin: 0 45px;
}
#tblRibbon{
width: 650px;
height: 65px;
background: url(../styleImages/Ribbon.png) no-repeat;
position: relative;
top: -140px;
left: 8px;
}
#tblBottom{
width: 665px;
height: 33px;
background: url(../styleImages/tbl_bottom.png) no-repeat top left;
}
/* end Table CSS */
答案 0 :(得分：0)
以下是jsFiddle，我相信您的问题是使用position:relative。我拿出那些（和img背景）。
我不确定你的设计是什么，因为td,div和id / class似乎有点矫枉过正。
更新
您没有使用imgs在td上设置宽度/高度。你还需要在td和内部div之间设置一些间距。如果背景img是50x50，那么你的内部div需要50px的填充，加上或减去样式偏好。
此外，您的示例没有content =元素0x0。
答案 1 :(得分：0)
根据规范，表内部元素（行，单元格）的相对定位具有未定义的行为。所以，如果你这样做，你自己承担风险。
答案 2 :(得分：0)
谢谢大家的帮助我找出了问题，这是由firefox没有在表格单元格空间中添加填充引起的。我读了一些firefox有一些填充问题的地方，所以我在解决问题时所做的就是在整个表格周围添加一个红色边框。这有助于我看到我接下来重新定义的宽度和高度firefox忽略了填充设置，所以我将8px的填充添加到表的高度并删除了所有填充。正如KnowHowSolutions建议我回顾相对位置并意识到，一旦我调整了高度，底部定位是错误的。在所有浏览器中经过一些调整和测试后，一切都很顺利。非常感谢您花时间提供帮助。