Question

我已经使用了div中的表格，如下面代码片段中的代码片段，我在脸上看到了safari浏览器中的td高度不同。

代码段[HTML]：

<body>

    <style type="text/css">       

        table{
           display:table;
           border-collapse:separate;
           border-color:gray;
           border-spacing:0;
       }

       .rowcell{
           border-collapse:collapse;
           border-style:solid;
           border-width:0 1px 1px 0;
           display:table-cell;
           overflow:hidden;
           white-space:nowrap;
           width:auto;
           vertical-align:middle;
           -ms-box-sizing:border-box !important;
           -webkit-box-sizing:border-box;
           -khtml-box-sizing:border-box !important;
           -o-box-sizing:border-box !important;
           -moz-box-sizing:border-box !important;
           box-sizing:border-box !important;
           margin-left:10px;
           padding-left:10px;
           padding-right:10px;
           padding-top:0;
           padding-bottom:0;
           border-color:#303030;

       }
    </style>

    <div class="e-gridcontainer" style="height:434px;width:303px;">
        <table class="e-table">
            <colgroup>
                <col style="width:30px;" />
                <col style="width:150px;" />
                <col style="width:150px;" />
                <col style="width:150px;" />
                <col style="width:150px;" />
                <col style="width:150px;" />
                <col style="width:150px;" />
                <col style="width:auto;" />
            </colgroup>

            <tbody>
                <tr class="row" style="display:table-row;">
                    <td class="rowcell" style="height:30px;">TEST</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

问题

Safari浏览器：

tr高度设置为31px

FirBox： td height设置为30px

如何在firefox浏览器中实现30px as td height

边框大小调整在Safari浏览器中无法正常工作

0 个答案: