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

标签 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" 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

最佳答案

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

关于html - 从 TD 元素中删除 IE8 额外填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9067141/

相关文章:

javascript - 滚动到 Aos.js 时不显示元素

c# - Repeater 中的 ASP.NET 可点击 Div

javascript - AngularJS,<选择>。 <option> 上的 `ng-click` 不起作用

internet-explorer-8 - 加载 webfont 文件完全挂起 IE8

css - IE8,XHTML,位置 : fixed; and z-index

html - 我怎样才能对齐这个?

html - 需要帮助获得背景以比剪报更复杂的方式通过某些文本显示

html - 需要使用 CSS/padding-bottom/li 进行评估

jquery - 这位作者是如何在文本中制作均衡器效果的?

html - Internet Explorer 中的隐藏文本