html - 跨浏览器样式问题

Question

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

我有一个表单提交按钮，点击后它会被禁用。发生服务器端验证，直到最终结果触发按钮向某些结果消息的变形。在验证期间，表单看起来“崩溃”了，因为所有内容都在短时间内被禁用。我在按钮右侧(而不是按钮内部)实现了一个基于 css 的“事件微调器”。后来我意识到这在 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
}

绝对定位元素相对于其第一个定位(非静态)祖先元素定位。