CSS Styling Forms - IE 6/7 bug

StackOverflow https://stackoverflow.com/questions/830921

Frage

Ich entwickle eine Website Formen und einen des Browser verwendet gezielt wird leider IE 6 und 7. Ich ein Problem mit CSS und IE-Rendering von Formularelementen habe, die gestylt sind.

Ich habe einen Testfall geschrieben, und es ist als solches (auch online unter http: / /xistence.osnn.net/testcases/ie67fieldset/ ): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>IE [6|7] Wha?</title>
    <style type="text/css">

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
    }

    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }

    body {
        line-height: 1;
        color: black;
        background: white;
    }

    #req fieldset {
        border: 0;
        border-top: 1px solid #000;
        padding: 0em 1em 0em 1em;
    }

    #req legend + label {
        margin-top: 0.5em;
    }

    #req legend {
        font-size: 1.2em;
    }

    #req label {
        display: block;
        background: none;
    }

    #req input, #req textarea {
        position: relative;
        display: block;
        left: 200px;
        top: -1em;
        margin-bottom: -0.3em;
    }

    #req input[type="text"], #req textarea {
        width: 300px;
    }

    #req textarea {
        height: 3.6em;
    }

    #req input[type="text"], #req textarea {
        border: 1px solid #0a0;
    }

    #req label.required + input[type="text"], #req label.required + textarea {
        border: 1px solid #a00;
    }

    #req input[type="submit"] {
        position: relative;
        top: 0;
        margin: 0;
        left: 200px;
        margin-top: 0.5em;
    }

    #req input[type="hidden"] {
        display: none;
    }
    </style>
</head>
<body>
<form id="req">
    <fieldset>
        <legend>Contact Information</legend>
        <label for="name" class="required">Name: </label> <input type="text" id="name" name="name"></input>
        <label for="phone" class="required">Phone Number: </label> <input type="text" id="phone" name="phone"></input>
        <label for="email">Email: </label> <input type="text" id="email" name="email"></input>
    </fieldset>
    <fieldset>
        <legend>Personal Info</legend>
        <label for="sports">Sports:</label> <input type="text" id="sports" name="sports"></input>
        <label for="spentonline">Hours spent online: </label> <input type="text" id="spentonline" name="spentonline"></input>
        <label for="moreinfo">Tell us about yourself: </label> <textarea id="moreinfo" name="moreinfo"></textarea>
    </fieldset>
    <fieldset>
        <input type="submit" value="Submit" />
    </fieldset>
</form>
</body>
</html>

ich auch zwei Screenshots genommen habe, von IE 7 und einen des IE 8, IE 7 und IE 6 auf diesem Styling zustimmen, so habe die Mühe ich nicht einen Screenshot von IE 6 zu nehmen.

IE [6 | 7]: eingeben Bild Beschreibung hier

IE 8:

eingeben Bild Beschreibung hier

Hat diesen Fehler jemand zuvor gesehen? Was habe ich falsch gemacht? Was muss ich entfernen, um es in IE 6/7 zu machen arbeiten, ohne zusätzliche Leitungen durchlaufen meine Eingabefelder. Die zusätzlichen Linien entfernt werden, wenn die border-top auf dem fieldset weg ist, aber das ist keine Lösung, da tat so entfernt die gesamte optische Trennung.

Es ist festgelegt. der margin-bottom auf dem Textfeld und input [type = "text"] verursacht wurde IE 6/7 ein Rendering-Bug haben. Entfernt diejenigen, und alles ist gut. Ich glaube, ich mit dem zusätzlichen Platz zwischen den Elementen auf der Seite umgehen kann!

War es hilfreich?

Lösung

Ich sehe, Sie verwenden 

input[type="submit"]

Ich bezweifle, dass dies von IE6 unterstützt wird ... Sie können Klassen auf allen Feldern setzen wollen den Unterschied zwischen den verschiedenen Arten von Eingang zu machen.

Bearbeiten : 

margin-bottom: -0.3em;

Sie sind zur Zeit negative Marge, die Probleme in IE führt oft und deshalb entfernt werden sollte

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top