从TD元素中删除IE8多余的填充
[英]Remove IE8 extra padding from TD element
问题描述
在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元素，但是
正如您在图像上看到的
由于td元素，按钮之间存在大量填充。 如何在IE8中删除此填充（不使用DOCTYPE）？
在FF中看起来像这样（这也是IE8中的样子）
3 个解决方案
解决方案1
1 已采纳 2012-01-30 16:55:42
当施加冲突的要求时，这取决于列的不同分配（最后一个单元格的宽度为“ 100％”）。 为避免这种情况，请将包围input元素的div元素更改为span元素，并将除第一个元素之外的其他元素放置到该行的第一个单元格中。
解决方案2
0 2012-01-30 16:33:25
我没有IE8来测试您的代码，但这通常对我有用：
table {
border-collapse: collapse;
}
另外，TD将填充作为默认样式。
td, table, tr {
padding:0;
}
解决方案3
0 2012-01-30 17:01:49
这是您可以控制的方式
的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>
删除IE8中select元素内的多余填充
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.