0

我使用 :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/

不太确定发生了什么，所以希望你们能提供任何建议。

4

2 回答 2

1

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

首先是在jquery的帮助下，你可以替换为和添加

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

效果很好，但是您丢失了 HTML5 表单验证。

要保留验证，您可以跳过 jquery，只需将“溢出：可见”添加到您的按钮样式中。目前只在 IE10 中测试过，等我重新发布时再测试其余部分。

于 2013-08-15T09:36:42.380 回答
0

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;
}
于 2013-08-11T15:16:30.920 回答