Question

我把一个按钮放在一起使用：before和：after元素和IE10 / 9完全忽略它们，据我所知，它们至少应该在这两个版本中完美运行。

.buttonSML {
    background-position:-35px -432px;
    background-color: transparent;
    border: none;
    text-transform: uppercase;
    font-size: 2.9rem;
    font-weight: @font-bold;
    height: 55px;
    padding: 0 5px;
    position: relative;
    .text-shadow(0,0,4px);
    cursor: pointer;
}

.buttonSML:before, .buttonSML:after {
    content: " ";
    position: absolute;
    top: 0;
    height: 55px;
    width: 20px;
    display: inline-block;
    visibility: visible
}

.buttonSML:before {
    background-image: url('../images/sprite.png');
    background-position: 0px -432px;
    background-repeat: no-repeat;
    background-color: transparent;
    left: -20px;
}

.buttonSML:after {
    background: url('../images/sprite.png');
    background-position: -394px -432px;
    background-repeat: no-repeat;
    background-color: transparent;
    right: -20px;
}

添加了一个jsfiddle，以便您可以看到最终结果http://jsfiddle.net/7D4kG/1/

不太确定你们能提供什么建议会有什么好处。

Answer 1

经过一番工作，我找到了2个解决方案。

在jquery的帮助下，你可以替换并添加

$('#button-id').click(function ()
{
$('#form-id').submit();
});

运行良好，但您放松了HTML5表单验证。

要保留验证，您可以跳过jquery，只需添加＆＃34; overflow：visible＆＃34;你的按钮风格。到目前为止只在IE10中进行了测试，稍后当我重新发布时会对其余部分进行测试。

Answer 2

http://jsfiddle.net/3MHHs/1/

我做了一些更改，它适用于Chrome和IE10。我完全删除了定位，因为这是非常......伪造的高级东西。浏览器也会在更简单的情况下失败。我也删除了5px填充。

.sprite {
    background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png')
}

.buttonSML {
    background-position: -35px -432px;
    background-color: transparent;
    border: none;
    text-transform: uppercase;
    font-size: 2rem;
    height: 55px;
    padding: 0;
    cursor: pointer;
}

.buttonSML:before, .buttonSML:after {
    content: "";
    width: 20px;
    height: 55px;
    font-size: 2rem;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-color: white; /* sorry */
    background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png');
}

.buttonSML:before {
    background-position: 0px -432px;
}

.buttonSML:after {
    background-position: -394px -432px;
}

伪元素IE10按钮

2 个答案: