Formulaires CSS Styling - Bug IE 6/7

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

Question

Je développe un site Web à l'aide de formulaires et l'un des navigateurs ciblés est malheureusement IE 6 et 7. J'ai un problème avec le rendu par CSS et par IE des éléments de formulaire stylisés.

J'ai écrit un scénario de test qui est également disponible en ligne à l'adresse 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>

J'ai également pris deux captures d'écran, l'une d'IE 7 et l'une d'IE 8, IE 7 et IE 6 s'accordant sur ce style. Je n'ai donc pas pris la peine de prendre une capture d'écran d'IE 6.

IE [6 | 7]: entrer la description de l

IE 8:

entrer la description de l

Quelqu'un at-il déjà vu ce bogue? Où me suis-je trompé? Que dois-je retirer pour que cela fonctionne dans IE 6/7 sans que des lignes supplémentaires passent par mes zones de saisie? Les lignes supplémentaires sont supprimées lorsque la bordure se termine sur le champs, mais ce n'est pas une solution, car cela supprime toute la séparation visuelle.

C'est corrigé. la marge inférieure de la zone de texte et l'entrée [type = "texte"] étaient à l'origine du bug de rendu dans IE 6/7. Supprimé ceux-ci et tout va bien. Je suppose que je peux gérer l'espace supplémentaire entre les éléments de la page!

Était-ce utile?

La solution

Je vois que vous utilisez 

input[type="submit"]

Je doute que IE6 prenne en charge cette option ... vous voudrez peut-être placer des classes sur tous vos champs pour faire la différence entre les différents types d'entrées.

MODIFIER : 

margin-bottom: -0.3em;

Vous utilisez actuellement une marge négative qui entraîne souvent des problèmes dans IE et doit donc être supprimée

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top