not working

Question

I have this code:

<!--[if !IE]><!-->

.roll-link {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    perspective: 600px;
    perspective-origin: 50% 50%;
}
a{text-decoration: none;}
.roll-link span {
    display: block;
    position: relative;
    padding: 0px 2px;
    transition: all 400ms ease 0s;
    transform-origin: 50% 0% 0px;
    -webkit-transform-origin: 50% 0% 0px;
    -o-transform-origin: 50% 0% 0px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;

    }
.roll-link:hover {
    text-decoration: none;
}
.roll-link:hover span {
    background: none repeat scroll 0% 0% #007B8C;
    transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -o-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

<!--<![endif]-->

that I want to be ignored by IE and it is not. I made a jsffidle: http://jsfiddle.net/567hx/ What am I doing wrong? I have IE10 Thanks

If you want to detec features to exclude browser it would be better to use Modernizr — Carlos487, Nov 07 '13 at 15:52

score 7 · Accepted Answer · answered Nov 07 '13 at 15:40

7

IE10 and higher have removed support for conditional comments.

In other words, your  code will not work in IE10 or later. There is no work-around. The feature has been removed.

The question is, why do you want IE to ignore this code?

If you're doing this because IE doesn't support the features you're using, you need to know that it probably does -- IE10 supports the majority of modern browser features, including transform and your roll over effect will probably work just fine with it.

If it doesn't, then it means you've done something wrong that needs to be fixed, so you should probably deal with that rather than try to hack around it by pretending the IE doesn't exist.

answered Nov 07 '13 at 15:40

Spudley

166,037
39
233
307

preserve 3d is not working in ie I think. Do you know if that is the case? – Claudiu Creanga Nov 07 '13 at 16:03
@Claudiu - yep, you're right, apparently not. A quick search gives me [this question](http://stackoverflow.com/questions/13474210/css3-3d-flip-animation-ie10-transform-origin-preserve-3d-workaround) which seems to have some work-around solutions for you. – Spudley Nov 07 '13 at 16:07
In any case, even if you do have a feature which isn't supported, you will need to use a different technique for detecting it. Use feature detection rather than browser detection, and you'll generally be in better shape. Modernizr can help with that. – Spudley Nov 07 '13 at 16:10
conditional compilation is the workaround for conditional comments – albert Jul 03 '14 at 01:44

not working

1 Answers1