Flexbox 和絕對定位在 Chrome 和 Safari 中不起作用

Question

我有一個具有以下樣式的按鈕類：

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

如果我取消選中然后再次檢查檢查器中的“位置：絕對”屬性，則圓圈會在中心對齊。 這是一個 Blink/Webkit 錯誤嗎？

Answer 1

絕對元素不會被父元素定位。 只需將其放置在左側並將其轉換為居中即可。

只是一個旁注，沒有必要使用display: flex; 在絕對元素上。

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

Answer 2

需要考慮的四件事：

1. 絕對定位的 Flex 項目不接受來自 parent 的 flex 屬性。 因為它們是 out-of-flow，一個 flex 容器的絕對定位子元素從flex 格式化上下文中刪除並返回到 塊格式化上下文（或其他框模型）。

2. HTML <button>元素不能是 flex 容器。

3. 在某些瀏覽器中，絕對定位的彈性項目可能不會從正常流程中刪除。

4. 將文本居中放置在 flexbox 中的圖像上