Custom css properties for IE_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-11 18:39 出处：网络

I have a hover effect on some buttons I made开发者_如何转开发 using jquery and css, the text that pops up is white text with a black background with text shadows etc. As IE doesnt support this is ther

相关专题：css javascript

.social li a strong 
{ 
    font-weight:normal; 
    position:absolute; 
    left:20px; 
    top:-1px; 
    color:#fff; 
    padding:3px; 
    z-index:9999;
    text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); 
    background-color:rgba(0, 0, 0, 0.7);
    -moz-border-radius:3px; 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    -webkit-border-radius:3px; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    border-radius:3px; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

You need to somehow identify IE.

1. Use a conditional comments stylesheet.

This requires an extra HTTP request, but I just call it the bad browser tax.

However, you can put the extra CSS inline in a style element.

2. Use a CSS hack

This is ugly, and not recommended. For some smallish property settings, it can be useful.

3. Attach a hook via JavaScript

This works well, because you can do .ie #element { ... }, except, without JavaScript enabled, the user won't see any IE only properties.

Use conditional statements
If IE do this 

If not IE do this  Do this 

Using internet explorer's conditional comments, you can append a class to your body tag:

<!--[if lt IE 7 ]>  <body class="ie6 ie"> <![endif]-->
<!--[if IE 7 ]>     <body class="ie7 ie"> <![endif]-->
<!--[if IE 8 ]>     <body class="ie8 ie"> <![endif]-->
<!--[if IE 9 ]>     <body class="ie9 ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

Then in your stylesheet, you can target the version (or versions) of IE that need additional CSS: