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

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


css internet-explorer internet-explorer-9
person GADOI    schedule 03.01.2011    source источник
comment
Повторите: stackoverflow.com/questions/635851/   -  person tcooc    schedule 03.01.2011
comment
@digitalFresh: вы прочитали вопрос? это о IE9 - и IE9 поддерживает радиус границы (как указано в вашей ссылке)   -  person oezi    schedule 03.01.2011
comment
@digitalFresh: При чем здесь это?   -  person BoltClock    schedule 03.01.2011
comment
Ха, закругленные углы не отображаются и в Opera 11.   -  person BoltClock    schedule 03.01.2011
comment
Вы должны сообщать об ошибках IE9 на странице connect.microsoft.com/ie.   -  person i_am_jorf    schedule 03.01.2011
comment
К сожалению, но неудивительно, что почти восемь лет спустя проблема с IE11 все еще существует.   -  person Antti29    schedule 18.09.2018
comment
Отвечает ли это на ваш вопрос? Закругленные углы в наборе полей   -  person KyleMit    schedule 11.02.2020

Ответы (9)


arrow_upward
23
arrow_downward

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

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

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

person easwee    schedule 26.10.2011
comment
Я обнаружил, что, хотя это и решило проблему в IE, оно сломало ее в хроме. Позиционирование, которое я должен был применить к легенде, чтобы переместить ее в нужное место, переместил ее слишком далеко в хроме, хотя в FF и IE все было нормально. В качестве работы я вставил стили, чтобы исправить это в IE только в IE таблица стилей только для IE. Для записи, стиль, который я использовал, был: display: inline-block; position relative; height: 30px; top: -15px; - person Ben; 02.08.2012
comment
Очевидно. Это относится к таблице стилей только для IE - вопрос помечен как internet-explorer - это исправление для IE - вы всегда хотите применить исправление только к браузеру с ошибками. - person easwee; 02.08.2012
comment
Отметьте этот SO-ответ для альтернативного плавающего решения <legend> stackoverflow.com/a/17406564/132599 - person David Clarke; 28.03.2014

arrow_upward
3
arrow_downward

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

person Irv Lennert    schedule 28.02.2011
comment
Похоже, это ошибка в выпуске IE9 для fieldset + legend, что, мягко говоря, раздражает. - person Tracker1; 27.07.2011

arrow_upward
3
arrow_downward

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

person josh    schedule 27.10.2012

arrow_upward
1
arrow_downward

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


.class {
 border-radius-right-bottom: 15px;
}
person Community    schedule 22.01.2011
comment
Это хороший момент для повторения - IE9 не является выпущенным продуктом. Это бета-версия. Не ждите, что все сработает. И не используйте его в качестве основного браузера, если вы не готовы к неожиданным сбоям. - person Spudley; 24.01.2011

arrow_upward
1
arrow_downward

Это все еще проблема в 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/

person Laszlo Lugosi    schedule 09.04.2015

arrow_upward
1
arrow_downward

Вы можете добавить следующий метатег:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
person bigbopper    schedule 15.11.2011

arrow_upward
0
arrow_downward

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

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

person GlennG    schedule 05.01.2011

arrow_upward
0
arrow_downward

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

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

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

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

person Nasir    schedule 24.01.2011
comment
IE9 должен поддерживать border-radius по умолчанию. Если вам нужно это использовать, это означает, что в ваших настройках есть что-то, что заставляет его переключаться в режим совместимости с IE8. Вы можете проверить настройки. Если вы все же воспользуетесь этой техникой, то сможете обойтись всего лишь IE=Edge; остальные не имеют значения, поскольку ни один другой браузер в любом случае не распознает X-UA-Compatible, и даже если бы они это сделали, зачем вам заставлять их использовать данный номер версии (здесь вы исправляете причуду в IE, а не в Firefox). - person Spudley; 24.01.2011

arrow_upward
0
arrow_downward

У меня был доступ только к файлу 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-структура, это не сработает. Поэтому вместо "формы" вы можете применить в css к родительскому div вашего набора полей.

person Olga    schedule 02.08.2015