Псевдо элементы Кнопка IE10

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 решения.

FIrst это с помощью JQuery, вы можете заменить и добавить

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

работает хорошо, но вы теряете формы HTML5 валидация.

Чтобы сохранить проверки, вы можете пропустить jquery и просто добавить «переполнение: видимый» в свой стиль кнопок. Испытали его только в IE10 до сих пор, проверим остальные позже, когда я перепубликую.

Answer 2

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

Я сделал некоторые изменения, и это работает для меня в Chrome и IE10. Я полностью удалил позиционирование, потому что это очень ... продвинутая вещь в псевдоопределениях. Браузеры также работают в более простых случаях. Я также удалил 5px padding.

.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; 
}