Flexbox和绝对定位在Chrome和Safari中不起作用

胡安S.

我有一个具有以下样式的按钮类:

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

在Firefox中看起来像预期的那样:

Firefox的结果

但是在Chrome,Safari和Vivaldi中,它看起来像这样:

产生镀铬

如果取消选中然后再次检查检查器中的“ position:absolute”属性,则圆会在中心对齐。这是Blink / Webkit错误吗?

让我们。

绝对的元素不会被父母对齐而定位。只需将其定位在左侧,然后对其进行变换以使其居中。

只是一个旁注,不需要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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么`height:100%`和绝对定位在flexbox中不起作用?

徽标绝对定位在Firefox和IE上不起作用

具有表格和绝对定位功能的Flexbox在IE 10、11或Edge中不起作用

为什么绝对定位在本机反应中不起作用?

空白:nowrap; 和Flexbox在Chrome中不起作用

地理定位在简单的 js 中不起作用

具有绝对定位功能的Flex在Safari中不起作用

Card flp 在 safari 中不起作用,在 Mozilla、Explorer 和 Chrome 中工作正常

视频自动播放在Safari和Chrome桌面浏览器中不起作用

javascript - 重新加载 iframe 内容后获取 iframe 的 URL 在 Chrome 和 Safari 中不起作用

javascript window.open在Safari和Chrome中不起作用

添加的间距在Firefox中有效,但在Chrome和Safari中不起作用

Anchor在chrome和safari浏览器中不起作用

<frameset>和<frame>在Chrome和Firefox中不起作用

CSS转换和过渡在Safari中不起作用

水平滚动箭头在Safari和Edge中不起作用

Javascript代码在ios和Safari中不起作用

Codeigniter会话在IE和Safari中不起作用

使用Bootstrap 4和Flexbox定位导航栏按钮不起作用?

正确:0绝对定位不起作用

页脚的绝对定位不起作用

SVG元素的绝对定位不起作用

自定义滚动效果在Safari和Firefix中不起作用,但在chrome中完美地工作?

CSS定位在代码编辑器中不起作用

将Cardview定位在彼此下方不起作用

固定位置在Safari 7中不起作用

固定位置在Safari版本8.0.2中不起作用

SetUID位在Ubuntu中不起作用?

jQuery过滤选择选项在Safari中不起作用(但在Chrome和FF中有效)