IE9 fieldset закругленные углы

Question

Я не могу заставить IE9 отображать набор полей с закругленными углами, в то время как другие браузеры делают.Кто-нибудь тоже сталкивался с этим?

Answer 1

Это происходит только в том случае, если вы используете <fieldset> с <legend> - без него углы отображаются нормально.

Эту ошибку можно исправить, применив display:inline или display:inline-block к элементу <legend>- но затем вам нужно переместить его обратно на место, установив position:relative и переместив его.

В зависимости от того, как выглядит стиль вашей легенды (с фоном он будет выглядеть одинаково - без фона граница)ofsetset будет по-прежнему виден за буквами), вы можете сделать так, чтобы он выглядел почти так же, как в других обычных браузерах.

Answer 2

Раньше я тоже использовал fieldset и не только для форм, но постоянная неудача в совместимости заставляла меня их сбрасывать.Лучше написать свои собственные классы CSS DIV, которые эмулируют fieldset.Используя CSS, вы можете получить точную копию того, как выглядит fieldset, и у вас гораздо больше гибкости и совместимости

Answer 3

Из моего опыта в последней версии IE9 я не могу получить набор полей с легендой, чтобы иметь радиус.У меня не было никаких проблем с другими границами в IE9, css3 border-radius работает просто отлично, просто fieldset / ledgend.Я до сих пор ломаю голову над этим.

Answer 4

Это все еще проблема под IE11 при использовании легенда , и решение в этой теме:

Закругленные углына наборе полей

 fieldset {
        margin:20px;
        padding:0 10px 10px;
        border:1px solid #666;
        border-radius:8px;
        box-shadow:0 0 10px #666;
        padding-top:10px;
 }  

legend {
        padding:2px 4px;
        background:#fff; 
    }


    fieldset > legend {
        float:left;
        margin-top:-20px;
    }
    fieldset > legend + * {
        clear:both;
    }

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/

Answer 5

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Вот как это исправить.

Answer 6

работает только в последней сборке rc, не работает в бета-версии IE9 try

.class {
 border-radius-right-bottom: 15px;
}

Answer 7

У меня был доступ только к CSS-файлу, поэтому я не мог вносить никаких изменений в HTML, поэтому я взломал CSS для IE.

Структура HTML была:

<form>
  <fieldset>
      ...form content...
  </fieldset>
</form>

Весь CSS для всех браузеров и с взломом IE:

fieldset {
    border-radius: 20px;
    border: 1px #3D3D3D solid;
}
@media screen and (min-width:0\0) {
    form {
        border: 1px #3D3D3D solid;
        border-radius: 20px;
    }
    fieldset {
        border: 0 none;
        margin-top: 1px;
        margin-bottom: 1px;
    }
}

Конечно, если ваш сайт имеет другую html-структуру, это не сработает. Поэтому вместо «form» вы можете применить в css родительский div вашего набора полей.

Answer 8

Чтобы IE9 использовал закругленные углы (CSS 3), вы должны добавить это в заголовок HTML:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Затем используйте CSS как обычно: border-radius-right-bottom:15px;

У меня была такая же проблема, и это исправлено.

Answer 9

Рендеринг Fieldset всегда чреват проблемами с рендерингом и особенно с печатью. Неудивительно, что это не работает.

Стандартный обходной путь - добавить еще один контейнер и стиль.