/ / Flexbox a absolútna poloha nepracujú v prehliadačoch Chrome a Safari - html, css, css3, flexbox, css-pozícia

Flexbox a absolútna poloha nepracujú v prehliadačoch Chrome a Safari - html, css, css3, flexbox, css-position

Mám triedu tlačidiel s nasledujúcimi štýlmi:

.button {
align-items: center;
background-color: #fff;
border: 2px solid;
border-color: #f48120;
color: #f48120;
cursor: pointer;
display: inline-flex;
font-size: 20px;
font-weight: bold;
justify-content: center;
margin-bottom: 5px;
padding: 3px 10px;
position: relative;
text-transform: lowercase;
}

.button::after {
background-color: #fff;
bottom: -4px;
content: "f111";
display: flex;
font-family: "FontAwesome";
font-size: 5px;
justify-content: center;
position: absolute;
width: 25%;
}
<button class="button">Enviar</button>

Vo Firefoxe vyzerá tak, ako sa očakávalo:

Výsledok vo Firefoxe

Ale v prehliadačoch Chrome, Safari a Vivaldi to vyzerá takto:

Výsledkom je chróm

Ak zruším začiarknutie a znovu skontrolujem atribút "position: absolute" v inšpektorovi, kruh sa zarovná do stredu. Je to chyba Blink / Webkit?

odpovede:

1 pre odpoveď č. 1

Absolútne prvky nebudú umiestnené zarovnané rodičmi. Stačí ju umiestniť ľavou a pretransformovať ju do stredu.

len sidenote, nie je potrebné používať display: flex; na absolútnom prvku.

.button {
align-items: center;
background-color: deeppink;
border: 2px solid;
border-color: aqua;
cursor: pointer;
display: inline-flex;
font-size: 20px;
font-weight: bold;
justify-content: center;
margin-bottom: 5px;
padding: 3px 10px;
position: relative;
text-transform: lowercase;
}

.button:after {
content: "";
background-color: deepskyblue;
bottom: -4px;
font-size: 5px;
position: absolute;
width: 25%;
height: 10px;
left: 50%;
transform: translateX(-50%);
}
<button type="button" class="button">Submit</button>


0 pre odpoveď č. 2

Štyri veci, ktoré treba zvážiť:

  1. Flex prvky, ktoré sú absolútne umiestnené, neprijmú od rodiča vlastnosti flexu, Vzhľadom k tomu, že sú mimo toku, absolútne umiestnené deti z kontajnera flex sú odstránené z a flex formátovanie kontextu a vráťte sa na blokovanie kontextu formátovania (alebo iný model schránky).

  2. HTML <button> prvky nemôžu byť ohybné nádoby.

  3. Absolútne umiestnené prvky flexu nemusia byť v niektorých prehliadačoch odstránené z bežného toku.

  4. Text v strede nad obrázkom vo flexboxe