Firefox浏览器中的表格布局设计问题

Question

我的html页面中有一个表，在表中第一个tr有图像，下一个tr有文本，它在IE和Chrome浏览器中看起来很不错

但是当我在Firefox浏览器中使用时，它看起来像这样：

我只是使用CSS（text-align：center）表示td和（border-collapse：collapse，width：100％）表格全部...

我的HTML代码：

<table class="foottable" border="0" cellpadding="0" cellspacing="1">
                <tr>
                    <td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
                    <td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
                    <td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
                    <td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
                    <td class="foottabcen"><a href="admin_chart.jsp" id="graph"><img class="image1" src="images/charticon.png" /></a></td>
                    <td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
                </tr>
                <tr>
                    <td class="foottabcen">Select all</td>
                    <td class="foottabcen">Export to excel</td>
                    <td class="foottabcen">Mail</td>
                    <td class="foottabcen">SMS</td>
                    <td class="foottabcen">Graph</td>
                    <td class="foottabcen">Print</td>
                </tr>
            </table>

我的CSS代码：

.foottable
{
    width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;background: white;
}
.foottabcen
{
    color:black;text-align: center;
}

请帮帮我.........

Answer 1

不确定为什么你会这样做，但我想更好的方法是将图像和文字放在同一个td中：

<td>
 <a href="#">
   <span><img src="images/exl_icon.png" alt="" /></span>
   <small>Export to excel</small>
 </a> 
</td> /* <a> is added considering these are clickable elements */

并通过您的CSS将display:block;应用于'a'，'span'和'small'。

可能最好的方法就是在td中使用text作为链接，并为其添加一个特定于图标的类：

<td>
 <a href="#" class="ico_excel">Export to excel</a>
</td>

在你的CSS中它看起来像这样：

 .ico_excel{
    display:block; 
    text-align:center;
    padding-top: x px; /* x should be more than the height of the icon */
    background: transparent url(images/exl_icon.png) center top no-repeat;
    }

Answer 2

试试这个

    <table class="foottable" border="0" cellpadding="0" cellspacing="1">
            <tr>
                <td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
                <td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
                <td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
                <td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
                <td class="foottabcen"><a href="admin_chart.jsp" id="graph"><img class="image1" src="images/charticon.png" /></a></td>
                <td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
            </tr>
            <tr>
                <td class="foottabcen1">Select all</td>
                <td class="foottabcen1">Export to excel</td>
                <td class="foottabcen1">Mail</td>
                <td class="foottabcen1">SMS</td>
                <td class="foottabcen1">Graph</td>
                <td class="foottabcen1">Print</td>
            </tr>
        </table>

和css ...根据你的要求为foottabcen提供高度

 .foottable
 {
     width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;
     background: white;
   }
 .foottabcen
 {
     color:black;text-align: center;height:50px;
    }
   .foottabcen1
{
color:black;text-align: center;
  }

在这里查看演示..... http://jsfiddle.net/dBFfd/

Answer 3

你尝试过这个......

<table>
    <tr>
        <td>
            <img id="check" src="images/unchecked.png"/>
            <span>sample</span>
        </td>
    </tr
</table>

但如果您希望我的免费助理只是通过电子邮件发送您的代码，我会尝试修复它....