pseudo elements IE10 button

问题

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

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.

回答1:

After some work I found 2 solutions.

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

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

Works well, but you loose HTML5 form validations.

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.

回答2:

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

I have made some changes and it works for me in Chrome and IE10. I completely removed the positioning, because that is very ...advanced thing in pseudos. Browsers fail on simpler cases too. I have removed the 5px padding too.

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

来源：https://stackoverflow.com/questions/18108735/pseudo-elements-ie10-button

标签

css3

internet-explorer-10

pseudo-element