Custom css properties for IE
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 there a way I can add a IE only rule so it will change the font color if the browser is IE.
.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 IE]>
Do this
<![endif]-->
If not IE do this
<!--[if !IE]>-->
Do this
<!--<![endif]-->
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:
.ie .social li a strong { ... }
加载中,请稍侯......
精彩评论