ie7 td with input extra vertical space_问答_开发者

开发者 https://www.devze.com 2023-01-26 11:17 出处：网络

just have found strange problem in ie7 rendering (may be for previous versions else). If I have input inside td it create cell with height more then other browsers (ff, ie8, chrome).

just have found strange problem in ie7 rendering (may be for previous versions else). If I have input inside td it create cell with height more then other browsers (ff, ie8, chrome). All margins are reset, paddings removed, cellcpacing to zeroes. The only possibly way to make them equivalent that I have found is specify height for all tds in pixels. But it seems to me very ugly.

here is html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h开发者_开发技巧ttp://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>

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

and here is screen shot:

ie7 td with input extra vertical space

float:left on the elements might help

I don't think you can fix it by changing the height of either td or input element, as there's always 1 offset auto generated for that input in IE7 mode. In IE8 or other popular browsers, the extra 1 offset is not generated.

I think it's a bug in IE7.