Formularios de estilo CSS: error de IE 6/7

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

Pregunta

Estoy desarrollando un sitio web utilizando formularios y uno de los navegadores a los que apuntamos es, por desgracia, IE 6 y 7. Tengo un problema con la representación de elementos de formulario CSS e IE con estilo.

He escrito un caso de prueba, y es así (también disponible en línea en 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>

También tomé dos capturas de pantalla, una de IE 7 y una de IE 8, IE 7 e IE 6 están de acuerdo con este estilo, por lo que no me he molestado en tomar una captura de pantalla de IE 6.

IE [6 | 7]: ingrese la descripción de la imagen aquí

IE 8:

ingrese la descripción de la imagen aquí

¿Alguien ha visto este error antes? ¿Qué hice mal? ¿Qué debo eliminar para que funcione en IE 6/7 sin tener líneas adicionales pasando por mis cuadros de entrada? Las líneas adicionales se eliminan cuando el borde superior desaparece en el conjunto de campos, pero eso no es una solución ya que al hacerlo se elimina toda la separación visual.

Está arreglado. el margen inferior en el área de texto y la entrada [type = " text "] causaban que IE 6/7 tuviera un error de representación. Quitó esos y todo está bien. ¡Creo que puedo ocuparme del espacio extra entre los elementos de la página!

¿Fue útil?

Solución

Veo que usas 

input[type="submit"]

Dudo que IE6 lo admita ... es posible que desee poner clases en todos sus campos para marcar la diferencia entre los diferentes tipos de entrada.

EDITAR : 

margin-bottom: -0.3em;

Actualmente está utilizando un margen negativo que a menudo genera problemas en IE y, por lo tanto, debe eliminarse

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top