跨浏览器样式问题

Question

我有一个跨浏览器样式问题，我需要一些帮助：

我有一个表单提交按钮，单击时会被禁用。进行服务器端验证，直到最终结果触发对某些结果消息的按钮变形。在验证期间，表单看起来已经崩溃了＃34;因为所有内容都被禁用了很短的时间。我实现了一个基于CSS的＆＃34;活动微调器＆＃34;就在按钮右侧（不在按钮内）。之后我意识到这在Chromium中运行得很好，而其他浏览器将微调器放在不同的位置......

这是一个简化的fiddler example：

标记：

<div>
    <button type="submit" class="busy" disabled="disabled">
        Some text on the button
    </button>
</div>

风格：

div {
    display: inline-block;
    padding: 10px 50px;
    border: green solid 1px;
}
button.busy::after {
    content: url(http://www.mccookgazette.com/images/icons/spinner16.gif);
    position: absolute;
    margin-left: 90px;
    margin-top: -15px;
}

任何人都可以在不改变标记的情况下获得一个简单的解决方案吗？

Answer 1

试试这个：

FIDDLE

div {
    display: inline-block;
    padding: 10px 50px;
    border: green solid 1px;
    position:relative; // This is where the below item will be positioned absolutely from.
}
button.busy::after {
    content: url(http://www.mccookgazette.com/images/icons/spinner16.gif);
    position: absolute;
    right: 15px;
    top: 50%; // Center vertically
    margin-top:-10px; //Offset by half height of spinner
}

绝对位置元素相对于其第一个定位（非静态）祖先元素定位。