Html ie7 td，输入额外的垂直空间_Html_Internet Explorer 7

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

html

Html ie7 td，输入额外的垂直空间,html,internet-explorer-7,Html,Internet Explorer 7,只是在ie7渲染中发现了奇怪的问题（可能是以前的版本）。如果我在td中输入，它将创建高度高于其他浏览器（ff、ie8、chrome）的单元格。所有边距都被重置，填充被移除，单元格被置为零。唯一可能使它们等效的方法我发现的是以像素为单位指定所有tds的高度。但在我看来，这很难看以下是html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

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

下面是屏幕截图：

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

我认为这是IE7中的一个bug。

浮动：保留元素可能会有所帮助

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