css3 - pseudo elements IE10 button -
i put button using :before , :after elements , ie10/9 ignoring them completely, far can tell should working in @ least 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; }
added jsfiddle can see end result http://jsfiddle.net/7d4kg/1/
not sure appreciate advice guys can provide.
after work found 2 solutions.
first of jquery, can replace , add
$('#button-id').click(function () { $('#form-id').submit(); });
works well, loose html5 form validations.
to keep validations can skip jquery , add "overflow: visible" buttons style. have tested in ie10 far, test rest later when republish.
Comments
Post a Comment