CSS Styling Forms - IE 6/7 bug

Je développe un site Web en utilisant des formulaires et l'un des navigateurs ciblés est malheureusement IE 6 et 7. J'ai un problème avec le rendu CSS et IE des éléments de forme qui sont dénommés .CSS Styling Forms - IE 6/7 bug

J'ai écrit un test, et il est en tant que telle (également disponible en ligne à 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 aussi pris deux captures d'écran, l'un des IE 7 et l'un des IE 8, IE 7 et IE 6 d'accord sur ce style donc je ne l'ai pas pris la peine de prendre une capture d'écran de IE 6.

IE [6 | 7]: enter image description here

IE 8:

enter image description here

Quelqu'un at-il déjà vu ce bogue? Où est-ce que je me suis trompé? Que dois-je supprimer pour le faire fonctionner dans IE 6/7 sans avoir des lignes supplémentaires passant par mes boîtes de saisie. Les lignes supplémentaires sont supprimées lorsque le bord supérieur est parti sur le fieldset, mais ce n'est pas une solution car cela supprime toute la séparation visuelle.

Il est corrigé. le margin-bottom sur la zone de texte et l'entrée [type = "text"] provoquaient IE 6/7 d'avoir un bug de rendu. Retiré ceux et tout va bien. Je suppose que je peux gérer l'espace supplémentaire entre les éléments sur la page!

Source

2009-05-06 X-Istence

Je vois que vous utilisez

input[type="submit"]

Je doute que c'est pris en charge par IE6 ... vous pouvez mettre des cours sur tous vos champs pour faire la différence entre les différents types d'entrée.

EDIT:

margin-bottom: -0.3em;

Vous êtes marge négative qui conduit souvent à des problèmes dans IE et devrait donc être retiré

Source

2009-05-06 18:17:03 marcgg

Ce n'est pas nécessaire, j'utilise Dean Edwards excellente IE7-js projet de réparer IE [6 | 7] à IE 8 niveaux, mais cela ne résout pas le problème fieldset où la frontière apparaît sur les éléments suivants. –

Hum ... ok. Revérifiez si cela ne conduit pas à des problèmes de réflexion. Vous devriez mettre différentes frontières pour chaque fieldset afin de voir exactement ce qui se répète. Je vois également une marge négative qui peut conduire à des problèmes IE6. Mis à part cela, je suis à court d'idées ... putain IE6 – marcgg

La limite supérieure pour le fieldset est répétée, quand vous avez mentionné la marge négative, il a jogué ma mémoire que c'était un problème avant. Retiré la marge-bas et tout va bien! Mettez cela dans une nouvelle réponse et je vais l'accepter :-). –

CSS Styling Forms - IE 6/7 bug

Répondre

Questions connexes