Округлые углы IE9

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

По-прежнему проблема при 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/

Ответ 7

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

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

Ответ 8

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

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

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

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

Ответ 9

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

Структура HTML:

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

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

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 вашего набора полей.