css - 自定义数字微调器仅在 Chrome 中表现异常

Question

我创建了一个自定义数字微调器/增量箭头，它可以正常工作数月。但最近，在 Chrome 中，它们没有正确定位并且无法正常工作。符号是相反的(见 fiddle )。它们在 Safari 中看起来很好，但不会出现在 Firefox 中(我对此很好)但我似乎无法在 CSS 中找到问题。

示例 JSFiddle:http://jsfiddle.net/0kLt81c5/3/

input[type=number]::-webkit-inner-spin-button { 
-webkit-appearance: none;
cursor:pointer;
display:block;
right: 50px;
width:20px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "▲";
    position:absolute;
    font-size: .7em;
    right: 4px;
}
input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}
input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}

Answer 1

我认为您的问题与浏览器处理转换的方式不一致有关。疯狂科学家 Jack Doyle ( http://greensock.com/svg-transforms ) 关于该主题的更多信息

我会在几年内远离这个问题。

相反，消除您的 transform:rotate(180deg) 并为 :before 和 :after 使用不同的箭头字符

另外，我发现向上和向下箭头存在一些显示问题。这是一个有很多选项的巨大讨论......
What characters can be used for up/down triangle (arrow without stem) for display in HTML?