Question

刚刚在ie7渲染中发现了奇怪的问题（可能是以前版本的其他版本）。如果我在td内部输入，则创建高度比其他浏览器更高的单元格（ff，ie8，chrome）。重置所有边距，删除填充，将单元格间隔为零。唯一可能使它们等效的方法我发现是指定所有tds的高度（以像素为单位）。但在我看来非常难看。

这里是html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <link type="text/css" href="styles/main.css" rel="Stylesheet" />
</head>
<body>
    <br />
    <table cellspacing="0" cellpadding="0" border="0" class="details-table">
        <tr class="details-row">
            <td>
                <label for="txtFirstName">First Name</label>
            </td>
            <td>
                <label for="txtFirstName">Last Name</label>
            </td>
        </tr>
        <tr class="alt-details-row">
            <td>
                <label for="txtFirstName">First Name2</label>
                <input type="text" class="details-input textField" id="txtFirstName2" name="txtFirstName2" />
            </td>
            <td>
                <label for="txtLastName2">Last Name2</label>
                <input type="text" class="details-input textField" id="txtLastName2" name="txtLastName2" />
            </td>
        </tr>
         <tr class="details-row">
            <td>
                <label for="txtFirstName3">First Name3</label>
                <input type="text" class="details-input textField" id="txtFirstName3" name="txtFirstName3" />
            </td>
            <td>
                <label for="txtLastName3">Last Name3</label>
                <input type="text" class="details-input textField" id="txtLastName3" name="txtLastName3" />
            </td>
        </tr>
    </table>
</body>
</html>

这里是css：

html,
body,
form,
table,
tr,
td
{
    margin: 0;
    padding:0;
    border: 0;
    outline: 0;
    font-size: 100%;
}


body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px ;
}

input.textField
{
    margin:0px;
    padding:0px;
    border: 1px solid #BFBFBF;
    height: 17px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px ;
}

.details-table
{
    width:100%;
    color: #666
}

.details-table tr.details-row,
.details-table tr.details-row td
{
    background: #ebe4bc;
}

这是屏幕截图： alt text

Answer 1

float：左边的元素可能有帮助

Answer 2

我认为您无法通过更改 td 或输入元素的高度来修复它，因为在IE7模式下，该输入始终会自动生成1个偏移量。在IE8或其他流行的浏览器中，不会生成额外的1个偏移量。

我认为这是IE7中的一个错误。

ie7 td，输入额外的垂直空间

2 个答案: