0

我是编码新手,并且遇到了我的第一个障碍。我一直在寻找两天的答案,到目前为止,我所看到的并不是唯一一个,但是我尝试使用或添加一些我见过人们使用的技术,此时我被难住了。

我的问题只出现在 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 */
4

3 回答 3

0

根据规范,表格内部元素(行、单元格)的相对定位具有未定义的行为。因此,如果您这样做,则需要自担风险。

于 2012-09-29T14:31:05.003 回答
0

这是一个jsFiddle,我相信您的问题是使用position:relative. 我把那些(和img背景)拿出来了。我不确定你真正想要什么设计,因为td,div和 id/class 似乎有点矫枉过正。

更新

您没有使用 imgs 在 td 上设置宽度/高度。您还需要在 td 和内部 div 之间设置一些间距。如果背景 img 是 50x50,那么您的内部 div 需要 50px 的填充,加上或减去样式偏好。

您的示例也没有内容 = 0x0 的元素。

于 2012-09-29T02:37:22.580 回答
0

谢谢大家的帮助我解决了这个问题,这是由于firefox没有在表格单元格空间中添加填充引起的。我读到一些firefox在填充方面存在一些问题的地方,所以我解决这个问题的方法是在整个表格周围添加一个红色边框。这帮助我看到了宽度和高度,我接下来表示 firefox 忽略了填充设置,因此我将 8px 的填充添加到表格的高度并删除了所有填充。正如 KnowHowSolutions 建议的那样,我检查了相对位置,并意识到一旦我调整了高度,底部的位置就错了。在所有浏览器中进行一些调整和测试后,一切都很好。非常感谢您花时间提供帮助。

于 2012-09-29T16:58:02.320 回答