/ / Flexbox i pozycjonowanie absolutne nie działają w Chrome i Safari - html, css, css3, flexbox, css-position

Flexbox i pozycjonowanie absolutne nie działają w Chrome i Safari - html, css, css3, flexbox, css-position

Mam klasę przycisku z następującymi stylami:

.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>

W przeglądarce Firefox wygląda tak, jak należy:

Wynik w Firefoksie

Ale w Chrome, Safari i Vivaldi wygląda to tak:

Wynik w chrome

Jeśli odznaczę, a następnie ponownie sprawdzę atrybut "position: absolute" w inspektorze, okrąg zostanie wyrównany w środku. Czy to błąd Blink / Webkit?

Odpowiedzi:

1 dla odpowiedzi № 1

Bezwzględne elementy nie zostaną ustawione przez rodziców wyrównuje. Po prostu umieść go po lewej stronie i przekształć, aby go wyśrodkować.

tylko słówka, nie ma potrzeby używać display: flex; na elemencie absolutnym.

.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 dla odpowiedzi nr 2

Cztery rzeczy do rozważenia:

  1. Pozycje elastyczne, które są pozycjonowane absolutnie, nie akceptują właściwości elastycznych od rodzica. Ponieważ są one poza przepływem, absolutnie pozycjonowane dzieci elastycznego pojemnika są usuwane z kontekst formatowania flex i wróć do a kontekst formatowania bloków (lub inny model pudełkowy).

  2. HTML <button> elementy nie mogą być elastycznymi pojemnikami.

  3. Absolutnie ustawione elementy flex mogą nie zostać usunięte z normalnego przepływu w niektórych przeglądarkach.

  4. Wyśrodkuj tekst na obrazie w flexbox