заполнение поля, проблемы с IE - PullRequest
Новая
       6

заполнение поля, проблемы с IE

2 голосов
/ 12 апреля 2011

Что происходит с рендерингом заполнения набора полей.Он ведет себя как ожидается в FF и Chrome, но не работает в IE.Это код, о котором я говорю: 

<html>
    <head>
    </head>
    <body>
        <fieldset>
            <legend>Hello world!</legend>
            <div>Lorem ipsum</div>                
        </fieldset>
    </body>
</html>

И это код CSS 

fieldset {
    border: 1px solid black;
    padding: 30px;
    }
    fieldset legend {
        background-color: silver;
    }
    fieldset div {
        border: 1px dotted silver;
    }

Также можно увидеть здесь: http://jsfiddle.net/nRAGM/6/

Поэтому мой вопрос: как получить выше HTML для отображения, как и предполагалось в IE?

Ответы [ 3 ]

5 голосов
/ 12 апреля 2011

Следующий код совместим с разными браузерами.

Вы можете самостоятельно контролировать отступ легенды набора полей.При заполнении набора полей вы также делаете отступ для легенды.Хотя в некоторых случаях это может быть желательным эффектом, следующий метод обеспечивает большую гибкость.Кроме того, добавление поля к внутреннему элементу div позволит вам лучше контролировать макет (поскольку добавление отступов в контейнер может добавить нежелательную ширину).

http://jsfiddle.net/nRAGM/35/

fieldset {
  border: 2px solid silver;
}

fieldset legend {
    border: 2px solid silver;
    margin-left: 30px;
}

fieldset div {
    border: 1px dotted silver;
    margin: 30px;
}
2 голосов
/ 05 августа 2012

Добавление display:block к стилю набора полей должно решить вашу проблему.Это сработало для меня!Проверять.

1 голос
/ 12 апреля 2011

или действительно непослушный хак (или поместите его в условную версию [lte IE 8] CSS). 

fieldset {
    border: 1px solid black;
    padding: 30px;
}
fieldset legend {
    background-color: silver;
    margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */
}
fieldset div {
    border: 1px dotted silver;
}

, нижняя граница label такая же, как у fieldsettop padding делает свое дело тоже.очевидно, никакой другой браузер не должен получать оба

PS: я думаю, что это работает и для IE6

...