CSS Styling Forms - ошибка IE 6/7 - PullRequest
Новая
       22

CSS Styling Forms - ошибка IE 6/7

1 голос
/ 06 мая 2009

Я занимаюсь разработкой веб-сайта с использованием форм, и одним из целевых браузеров, к сожалению, является IE 6 и 7. У меня проблема с рендерингом стилей элементов CSS и IE.

Я написал тестовый пример, и он как таковой (также доступен в Интернете по адресу 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>

Я также сделал два снимка экрана: один из IE 7 и один из IE 8, IE 7 и IE 6 согласовали этот стиль, поэтому я не потрудился сделать снимок экрана IE 6.

IE [6 | 7]: enter image description here

IE 8:

enter image description here

Кто-нибудь видел эту ошибку раньше? Где я неправ? Что я должен удалить, чтобы он работал в IE 6/7 без лишних строк, проходящих через мои поля ввода. Лишние строки удаляются, когда на вершине поля отсутствует граница, но это не решение, поскольку при этом удаляется все визуальное разделение.

Это исправлено. нижнее поле текстовой области и input [type = "text"] вызывало ошибку рендеринга в IE 6/7. Убрал тех и все хорошо. Я думаю, я могу справиться с дополнительным пространством между элементами на странице!

1 Ответ

2 голосов
/ 06 мая 2009

Я вижу, вы используете 

input[type="submit"]

Я сомневаюсь, что это поддерживается IE6 ... вы можете разместить классы на всех ваших полях, чтобы иметь разницу между различными типами ввода.

РЕДАКТИРОВАТЬ : 

margin-bottom: -0.3em;

В настоящее время вы используете отрицательную маржу, которая часто приводит к проблемам в IE и поэтому должна быть удалена

...