How Do I Target IE7 or IE8 Using CSS Hacks?

最新推荐文章于 2020-08-14 22:59:46 发布

转载最新推荐文章于 2020-08-14 22:59:46 发布 · 624 阅读

前端学习笔记专栏收录该内容

99 篇文章

订阅专栏

本文介绍如何仅针对IE7和IE8浏览器应用CSS样式，通过使用条件类和CSS hack，确保不同浏览器拥有统一且兼容的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载地址:http://www.impressivewebs.com/ie7-ie8-css-hacks/

By Louis Lazaris on November 3rd, 2011 | 58 Comments

It’s very likely that you’ve dropped support for IE6 in your designs, seeing as the worldwide sharefor that browser is below 5% and declining each month.

And if you’re developing websites or web apps in any technology-related niche (like web design), then IE6 visitors are probably even lower. For this website, IE6 visitors since January 1, 2011 account for about 0.5% of users, and in the last 30 days, that’s dropped to about 0.3%. You might have similar stats.

For this reason, it’s more than likely that the only CSS hacks you’ll need are for IE7 and IE8. Firstly, if you follow some basic CSS coding principles, then you might very well need no hacks or workarounds for IE7 and IE8. For the design of this blog, I currently have ~~zero~~ very few IE-specific hacks — so it’s obviously possible to get by without relying too strongly on hacks. (Update: I’m no longer supporting IE6 on this site, so that does help greatly).

Nonetheless, many beginners may need ways to target IE7 and/or IE8. Here I outline the best methods for doing so.

Paul Irish’s Conditional Classes

The best method, by far, is the conditional classes technique popularized by Paul Irish. Here’s how you do it:

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]>     <html class="ie8"> <![endif]-->
<!--[if IE 9]>     <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html>             <!--<![endif]-->

This uses conditional comments to target certain versions of Internet Explorer, and the <html>element receives a custom class name for different versions of IE, and no class name when the browser is not IE.

Then in your CSS, you would target IE7 or IE8 like this:

.element {
	margin-bottom: 20px;
}

.ie7 .element {
	margin-bottom: 10px;
}

.ie8 .element {
	margin-bottom: 15px;
}

Every browser will have a bottom margin of 20px on the element in question, but IE7 and IE8 will have a bottom margin of 10px and 15px respectively.

It’s important to note here that although targeting IE is necessary at times, I strongly suggest you try to find a better way to fix any browser differences, and avoid using conditional classes or any of the hacks mentioned below, if at all possible. Sometimes you just need to rethink your CSS and possibly your markup, and you can avoid this extra code from the start.

CSS Hacks

Another way to target IE7 or IE8 is using hacks.

First, how to target IE7 only. There are probably more than just two ways to do this, but here are two (which is really all you’ll need):

* + html .element {
	margin-bottom: 10px;
}

(Thanks to Anthony for the tip on this first one, above)

The hack is the part of the selector that comes before .element. No other browser will recognize that selector, so the 10px bottom margin will only appear to users of IE7.

Here’s another less memorable method:

*:first-child+html .element {
	margin-bottom: 10px;
}

Yet another way to target IE7 is like this:

.element {
<span style="white-space:pre">	</span>margin-bottom: 20px;
<span style="white-space:pre">	</span>*margin-bottom: 10px;
}

The “hack” is the asterisk at the start of the line of CSS that you want to apply to IE7. The only problem here is that this will also apply to IE6. So you should only use this if you know that this hack will look fine in IE6, or if you don’t care what it looks like in IE6. So if you’ve dropped support for IE6, then this should be fine.

From my research on this subject, there does not appear to be a way to target only IE8 (and not IE6, IE7, and IE9+) with a CSS hack. The only way seems to be using a conditional comment.

However, if you’ve dropped support for IE7, then you could use the following:

.element {
<span style="white-space:pre">	</span>margin-bottom: 20px;
<span style="white-space:pre">	</span>margin-bottom: 10px\9;
}

The “hack” is the \9 following the value and preceding the closing semicolon. This will target IE8 and below, so you should only use this as an IE8-only hack if you no longer support IE6 or IE7 (because both those versions will apply the style in this hack).

Conditional Comments

Finally, you could separate your CSS for IE7 and IE8 into separate files, using conditional comments, like this:

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->

But I do not recommend you use this method. This has two main problems: First, it separates your CSS into three different files, making it much harder to maintain. And second, you’re adding extra HTTP requests in two of the slowest browsers, making your pages load much more slowly.

So my suggestion is to use either the conditional classes or else a simple hack to target IE7 or IE8.

Questions? Clarifications?

This post is not intended to be an exhaustive reference on this subject. It's meant to provide a simple CSS tip for beginners. If you have any questions or clarifications on anything I've said here,add them to the comments. If necessary, I'll continually improve this article to keep it up to date with the latest CSS standards and best practices.

This is the CSS Basics section of Impressive Webs. These posts do not appear in the main home page feed. You can subscribe via RSS or get an email notification whenever a new post is added.