Html 从TD元件上拆下IE8额外衬垫_Html_Css_Internet Explorer 8

Html 从TD元件上拆下IE8额外衬垫

html css internet-explorer-8

Html 从TD元件上拆下IE8额外衬垫,html,css,internet-explorer-8,Html,Css,Internet Explorer 8,在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

在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>

我已经实现了缩短输入元素以不填充

td

元素，但是

正如你在图片上看到的

由于

td

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

在FF中是这样的（在IE8中也是这样）

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

table {
    border-collapse: collapse;
}

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

td, table, tr {
    padding:0;
}

这取决于施加冲突要求时列的不同分配（最后一个单元格具有width=“100%”）。要避免这种情况，请将包含

input

元素的

div

元素更改为

span

元素，并将它们（第一个除外）放入行的第一个单元格中。

这是您可以控制的方法

CSS

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>

我建议使用div，除非您确实需要以表格格式显示某些内容。PS Strict doctype似乎解决了使用CSS重置或HTML5样板文件时的许多问题。使用基于表格的布局有什么原因吗？您有一个按钮列表。带有浮动的

：左在视觉和语义上都能更好地工作。不幸的是，这个解决方案并不能解决我的问题。按钮之间仍有空格。这是个好主意。唯一剩下的是最后一个按钮必须向右对齐，如果我将foat:right应用于它，它将在新行上渲染。但这可以通过将此跨距作为div中的第一个跨距来修复。如果将最后一个按钮放在其自己的单元格中，则可以将文本对齐：设置在单元格上，而不进行任何浮动。

table {
    table-layout: fixed;
}

   <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>