我是编码新手,并且遇到了我的第一个障碍。我一直在寻找两天的答案,到目前为止,我所看到的并不是唯一一个,但是我尝试使用或添加一些我见过人们使用的技术,此时我被难住了。
我的问题只出现在 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 文档 */
#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 */