[html] ¿Por qué no <fieldset> pueden ser contenedores flexibles?



Answers

Descubrí que esto podría ser un error en Chrome y Firefox donde la legend y el fieldset son elementos reemplazados .

Errores reportados:

code.google.com/p/chromium/issues/detail?id=262679
Bug Firefox

Una posible solución alternativa:

Una posible solución sería usar <div role="group"> en HTML, y aplicar en CSS div[role='group'] como selector.

Question

Intenté fieldset un elemento fieldset con display: flex y display: inline-flex .

Sin embargo, no funcionó: flex comportó como un block y inline-flex comportó como inline-block .

Esto sucede tanto en Firefox como en Chrome, pero extrañamente funciona en IE.

¿Es un error? No pude encontrar que fieldset tenga un comportamiento especial, ni en HTML5 ni en las especificaciones de diseño de CSS Flexible Box .

fieldset, div {
    display: flex;
    border: 1px solid;
}
<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>




<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

Puede que necesite utilizar el grupo de roles porque Firefox, Chrome y yo creemos que Safari tiene un error con los conjuntos de campo aparentemente. Entonces, el selector en CSS sería simplemente

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

Editar: Aquí hay algunos problemas que otras personas también están experimentando.

Número 375693

code.google.com/p/chromium/issues/detail?id=262679




Related