Question

在IE8中，我获得了td元素的额外填充。

这是我的html

<html>
<head>
    <title>Test page</title>
</head>

<body>
 <div id="actionDiv" width="100%" align="center" style="display:none;"></div>
        <table class="background" width="100%">
            <tr width="100%">
                <td align="center"><div id="new"><input type="button" class="button" value="Button1" id="button1" readonly="readonly"/> </div></td>
                <td align="center"><div id="save"><input type="button" class="button" value="Button1" id="button2" readonly="readonly"/> </div></td>
                <td align="center"><div id="savenew"><input type="button" class="button" value="Button3" id="button3" readonly="readonly"/> </div></td>
                <td align="center"><div id="saveback"><input type="button" class="button" value="Button4" id="button4" readonly="readonly"/> </div></td>
                <td align="center"><div id="select"><input type="button" class="button" value="Button5" id="button5" readonly="readonly"/> </div></td>
                <td align="center"><div id="modify"><input type="button" class="button" value="Button6" id="button6" readonly="readonly"/></div></td>
                <td align="center"><div id="view"><input type="button" class="button" value="Button7" id="button7" readonly="readonly"/></div></td>
                <td align="center"><div id="copy"><input type="button" class="button" value="Button8" id="button8" readonly="readonly"/></div></td>
                <td align="center"><div id="delete"><input type="button" class="button" value="Button9" id="button9" readonly="readonly"/></div></td>
                <td align="center"><div id="report1"><input type="button" class="button" value="Report1" id="report1" readonly="readonly"/> </div></td>
                <td align="center"><div id=""><input type="button" class="button" value="report2" id="Report2"/></td>
                <td align="right" width="100%"><div id="back"><input type="button" class="button" value="Back" id="Button10" readonly="readonly"/> </div></td>
            </tr>
        </table>
</body>
</html>

和我的css文件

.background {
    background-color: #e6e6e6;
    height: 1px;
}

input.button {
    background-color: #7B9978;
    text-decoration: none;
    font-family: Verdana, Arial, Tahoma;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff; /*width: 100px;*/
    overflow:visible;
    padding: 0px 2px;
    height: 18px;
    border-style: solid;
    border-width: 0px;
    border-color: #000000;
}

我已经实现缩短输入元素而不是填充td元素，但是

正如你在图片上看到的那样

enter image description here

由于td元素，按钮之间存在显着的填充。如何在IE8中删除此填充（不使用DOCTYPE）？

在FF中看起来像这样（这也是它在IE8中应该是这样的）

enter image description here

Answer 1

这取决于在施加冲突要求时列的不同分配（最后一个单元格具有宽度=“100％”）。要避免这种情况，请将包含div元素的input元素更改为span元素，并将它们（第一个除外）放入该行的第一个单元格中。

Answer 2

我没有IE8来测试你的代码，但这通常对我有用：

table {
    border-collapse: collapse;
}

此外，TD将填充作为默认样式。

td, table, tr {
    padding:0;
}

Answer 3

这是你可以控制的方式

CSS

table {
    table-layout: fixed;
}

HTML 您可以根据需要更改宽度并进行调整。

   <table class="background" width="100%">
        <tr>
                <td align="center" width="4%"><div id="new"><input type="button" class="button" value="Button1" id="button1" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="save"><input type="button" class="button" value="Button1" id="button2" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="savenew"><input type="button" class="button" value="Button3" id="button3" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="saveback"><input type="button" class="button" value="Button4" id="button4" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="select"><input type="button" class="button" value="Button5" id="button5" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id="modify"><input type="button" class="button" value="Button6" id="button6" readonly="readonly"/></div></td>
                <td align="center" width="4%"><div id="view"><input type="button" class="button" value="Button7" id="button7" readonly="readonly"/></div></td>
                <td align="center" width="4%"><div id="copy"><input type="button" class="button" value="Button8" id="button8" readonly="readonly"/></div></td>
                <td align="center" width="4%"><div id="delete"><input type="button" class="button" value="Button9" id="button9" readonly="readonly"/></div></td>
                <td align="center" width="4%"><div id="report1"><input type="button" class="button" value="Report1" id="report1" readonly="readonly"/> </div></td>
                <td align="center" width="4%"><div id=""><input type="button" class="button" value="report2" id="Report2"/></div></td>
                <td align="right" width="56%"><div id="back"><input type="button" class="button" value="Back" id="Button10" readonly="readonly"/> </div></td>
        </tr>
    </table>

从TD元素中删除IE8额外填充

3 个答案: