Jan Kunzmann: IE rendert immer 1px margin um INPUT-Tags

Beitrag lesen

Schönen guten Tag!

Beim Designen einer Seite habe ich festgestellt, dass der Internet Explorer immer eine 1 Pixel breite margin oberhalb und unterhalb eines Input-Feldes einfügt.

Hier der Testcase:

<html>
<head>
<style type="text/css">
div { padding:0px; margin:0px; background-color:#ff0000; }
input { padding:0px; margin:0px; }
</style>
</head>

<body>
<form><div bgcolor="#ff0000"><input type="text"></div></form>
</body>

</html>

Beim IE ist über und unter dem Inputfeld noch ein 1 Pixel breiter Streifen des roten Hintergrundes zu sehen. Mozilla hingegen rendert es so, wie ich das erwarten würde.

Fügt man für das Input ein margin-top:-1px;margin-bottom:-1px; ein, dann gehts beim IE - aber das ist natürlich nicht im Sinne des Erfinders.

Ist dieses Phänomen schon mal aufgefallen und weiß jemand vielleicht einen Workaround, der auf beiden Browsern geht?

Merci,
Jan