CSS - ::after 在 Chrome 和 Firefox 中有另一个填充答案

【问题标题】：CSS - ::after has another padding in Chrome and FirefoxCSS - ::after 在 Chrome 和 Firefox 中有另一个填充
【发布时间】：2015-04-09 02:15:13
【问题描述】：

我有一个带有伪元素 ::after 的按钮（标签 a）。问题是元素在 chrome 和 firefox 中看起来不同

谷歌浏览器：

Mozilla 火狐：

我的代码是：

<a class="play_button" href="#">Some link</a>


a.play_button {
    background-color: white;
    text-decoration: none;
    color: #49bf96;
    position: relative;
    padding: 6px 23px 7px 23px;
    border: solid 1px #49bf96;
    top: 30px;
    right: 12px;
}
a.play_button::after {
    background-color: white;
    content: url('http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/darovat_vystoupeni_sipka.png');
    width: 10px;
    height: 16px;
    position: absolute;
    display: block;
    padding: 7px 9px;
    top: -1px;
    right: -28px;
    font-size: 16px;
    color: #49bf96;
    border: solid 1px #49bf96;
    border-left: solid 1px #49bf96;
}
a.play_button:hover {
    background-color: #49bf96;
    color: white;
    border: solid 1px #1c7d5c;
}
a.play_button:hover::after {
    content: url('http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/bila_sipka.png');
    background-color: #49bf96;
    color: white;
    border: solid 1px #1c7d5c;
    border-left: solid 1px #1c7d5c;
}

JSFiddle here

我该如何解决？ JSFiddle 中的答案是最好的。

【问题讨论】：

您怀疑是什么导致了这个问题？顺便说一句，在 Safari 中也是如此。
我不知道，这就是我在这里问的原因。可能是后元素的填充或高度
我做了一个高度为 100% 的小提琴，但图像没有居中 jsfiddle.net/xn8wcgdp/12
jsfiddle

标签： css google-chrome firefox pseudo-element

【解决方案1】：

您的代码中需要进行一些修复。

DEMO

所以，首先，您在相对定位的元素上使用了 top: 和 right: 声明，这并不是真正需要/冗余的。

您在伪元素上使用填充/边距，这并不是一个好主意。这还包括“重用”像素高度而不是父级的 100%。

还有其他一些小的改动，虽然我说过这些都是小改动。

a.play_button {
  background-color: white;
  text-decoration: none;
  color: #49bf96;
  position: relative;
  padding: 6px 23px 7px 23px;
  border: solid 1px #49bf96;
  margin-top: 30px;
  margin-right: 12px;
}
a.play_button::after {
  background-color: white;
  content: url('http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/darovat_vystoupeni_sipka.png');
  width: 20px;
  height: 100%;
  position: absolute;
  top: -1px;
  right: -10px;
  font-size: 16px;
  text-align: center;
  line-height: 32px;
  color: #49bf96;
  border: solid 1px #49bf96;
  border-left: solid 1px #49bf96;
}
a.play_button:hover {
  background-color: #49bf96;
  color: white;
  border: solid 1px #1c7d5c;
}
a.play_button:hover::after {
  content: url('http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/bila_sipka.png');
  background-color: #49bf96;
  color: white;
  border: solid 1px #1c7d5c;
  border-left: solid 1px #1c7d5c;
}

&lt;a class="play_button" href="#"&gt;Some link&lt;/a&gt;

【讨论】：

感谢您的回答和解释

【解决方案2】：

我调整了字体大小。但是，这不是正确的实现。我建议您对 chevron 右图标使用 glyph-icons 或 font awesome。在这里摆弄：- fiddle

font-size: 17px;

【讨论】：

【解决方案3】：

我将width: auto; height: auto; 添加到.play_button。

a.play_button {
    background-color: white;
    text-decoration: none;
    color: #49bf96;
    position: relative;
    padding: 7px 23px;
    border: solid 1px #49bf96;
    width: auto; height: auto;
    top: 30px;
    right: 12px;
}

我修改了::after 选择器，像这样padding: 7px 10px; text-align: middle; top: -1px; right: -29px;

看看JSFiddle

【讨论】：