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

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -