'after' 的样式在浏览器中有所不同答案

【问题标题】：Styles for 'after' differ in browsers'after' 的样式在浏览器中有所不同
【发布时间】：2014-10-07 20:19:30
【问题描述】：

我在使用:after 的输入框后显示一个星号。不同的浏览器以不同的方式呈现样式。我怎样才能使它在所有浏览器中看起来都相似。请在不同的浏览器中查看此Fiddle，您可以在其中看到差异。

【问题讨论】：

规范化输入？ input {padding:2px;border:1px solid;margin:2px;}
即使这样也能看出一点不同。明星正在触摸 Firefox 中的输入字段，而不是 chrome。 @AlexK。
很多东西在不同的浏览器中看起来都不一样！这就是@l2aelba 提到 CSS 重置的原因——它是一个 CSS 样式表，旨在为您提供一个通用的构建基础。

【解决方案1】：

您可以为 a:after 设置宽度和高度，并为输入提供自定义样式（以避免填充、边框等方面的差异）

.a:after{
    content:'*';
    display:inline-block;
    position:absolute;
    top:-8px;
    right:-8px;
    width:8px;
    height:8px;
    text-align:center;
}
.a{
    position: relative;
    display:inline-block;
}
input {
    border:1px solid #ccc;
    margin:0;
    padding:2px;
}

我已经检查过 safari、firefox 和 chrome。

【讨论】：