Zaokrąglone narożniki IE9

Question

Nie mogę sprawić, że IE9 renderuje zestaw pól z zaokrąglonymi narożnikami, podczas gdy inne przeglądarki to robią. Czy ktoś to napotkał?

Answer 1

Podczas renderowania zestawu pól zawsze pojawiają się problemy z renderowaniem, a zwłaszcza z drukowaniem. Nic dziwnego, że to nie działa.

Standardowe obejście polega na dodaniu kolejnego kontenera i stylu.

Answer 2

jej tylko pracę w najnowszej wersji RC Aint działa w wersji beta IE9 spróbować

 

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

Answer 3

Aby uzyskać IE9 użyć zaokrąglone narożniki (CSS 3) trzeba dodać do nagłówka HTML:

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

Następnie za pomocą CSS, jak zwykle: border-radius-right-bottom:15px;

miałem ten sam problem & to naprawiło to.

Answer 4

Z mojego doświadczenia w najnowszej wersji IE9, nie mogę uzyskać zestawu pól z legendą, aby mieć promień. Nie miałem żadnych problemów z innymi granicami w IE9, css3 border-radius działa dobrze, tylko fieldset/ledgend. Wciąż nad tym myślę.

Answer 5

Dzieje się tak tylko wtedy, gdy używasz <fieldset> z <legend> - bez tego narożniki renderują się poprawnie.

Można rozwiązać ten problem poprzez zastosowanie display:inline lub display:inline-block do elementu <legend> - ale nie trzeba przesunąć go z powrotem na swoim miejscu, ustawiając position:relative i przesuwając go dookoła.

W zależności od stylizacji twojej legendy (z tłem będzie wyglądać tak samo - bez tła granica zestawu pól będzie nadal widoczna za literami) możesz sprawić, że będzie wyglądać tak samo jak w innych normalnych przeglądarki.

Answer 6

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

To jest jak to naprawić.

Answer 7

Również używałem zestawu pól i nie tylko formularzy, ale ciągłe trafienie i brak zgodności powodowało, że je zrzucałem. Lepiej napisać własne klasy CSS DIV, które emulują zestaw pól. Za pomocą CSS można uzyskać dokładną replikę co fieldset wygląda i masz dużo większą elastyczność i kompatybilność

Answer 8

Jest jeszcze problem, pod IE11 podczas korzystania legendę , a rozwiązaniem jest w tym wątku :

Rounded corners on a fieldset

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 9

Miałem dostęp tylko do pliku CSS, więc nie mogłem wprowadzać żadnych zmian w HTML, więc zrobiłem hack w CSS dla IE.

struktura HTML było:

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

Cały CSS dla wszystkich Browers iz 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; 
    } 
} 

Oczywiście, jeśli witryna ma inny html strukturę, to nie będzie działać. Dlatego zamiast "formularza" można zastosować w css do div jednostki nadrzędnej swojego zestawu pól.