habe gerade seltsames Problem in ie7 Rendering gefunden (kann für frühere Versionen anders sein). Wenn ich in td eingegeben habe, erstelle Zelle mit der Höhe mehr als andere Browser (ff, ie8, chrome). Alle Ränder werden zurückgesetzt, Padding entfernt, cellcpacing auf Nullen. Der einzige mögliche Weg, um sie gleichwertig zu machen , die ich gefunden habe, ist Höhe für alle tds in Pixeln angeben. Aber es scheint mir sehr hässlich.ie7 td mit Eingabe zusätzlichen vertikalen Abstand
hier ist 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>
hier ist 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;
}
und hier ist Screenshot: