伪元素IE10按钮 [英] pseudo elements IE10 button

问题描述

我使用:before和:after元素组合了一个按钮，而IE10/9完全忽略了它们，据我所知，它们至少在这两个版本中应该可以正常工作.

I put together a button using :before and :after elements and IE10/9 are ignoring them completely, as far as I can tell they should be working perfectly in at least those 2 versions.

.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/

Added a jsfiddle so you can see the end result http://jsfiddle.net/7D4kG/1/

不太确定结果如何，不胜感激你们可以提供的任何建议.

Not really sure what up so would appreciate any advice you guys can provide.

推荐答案

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

After some work I found 2 solutions.

首先是在jquery的帮助下，您可以替换并添加

FIrst is with the help of jquery, you can replace with and add

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

效果很好，但是您失去了HTML5表单验证.

Works well, but you loose HTML5 form validations.

要保持验证，您可以跳过jquery，而只需在按钮样式中添加"overflow:visible".到目前为止，仅在IE10中进行了测试，稍后将在我重新发布时进行其余测试.

To keep the validations you can skip the jquery and just add "overflow: visible" to your buttons style. Have only tested it in IE10 so far, will test the rest later when I republish.

这篇关于伪元素IE10按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！