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

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -