IE8 CSS Hack - best method?

人盡茶涼 提交于 2019-11-27 23:51:09

You should reverse your method. First your site should look good in modern browsers (like Firefox, Chrome, Opera, IE 9), and then you can start worrying about the others.

As others suggested, conditional comments can be your friend.

First, you should develop your CSS to look fine in the modern browsers. Then check IE8, see what problems you get. If you need to, include an IE-specific stylesheet. After that, you can check in IE7 and then IE6 if you support it, and add further fixes.

An example:

<link rel="stylesheet" href="normal.css" type="text/css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="ie8.css"><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->

In this case you include normal.css which is for modern browsers. You found some strange IE8 issues, so in ie8.css you fix the problems. You don't have to include all your selectors in this, only the ones that need a fix (the values will be overridden for IE 8 and lower). After that, if there are still some strange things in IE7, you can add your ie7.css and fix those, and so on.

Please refer to the links the others gave you to get more information on the usage of conditional comments.

Finally: making IE8 render as IE7 for ease is never a good idea, and should be avoided. IE7 is the far past (in the IT world, IE8 should be the far past either...), develop for the present and the future, and after that you can care about the people who are still stuck with old technology (based on your audience and business plan).

As other answers posted,you could use Conditional Comments,but that would add one HTTP request when user is using IE8. You can use the \0 hack in the css file

img{
width:200px;//other broswers
width:100px\0;//only IE8
}

Can you explain a bit more what you want?

Generally, IE8 is quite standards compatible, so just make sure your HTML document is in standards mode and give IE8 the same stylesheet as any other browser.

If IE is acting up, then the best solution is to use Conditional Comments to give IE a separate stylesheet.

Use the ie7-js Javascript library, which does some magic to make older IE versions behave more like proper browsers with their handling of HTML and CSS. Then, as others have suggested, write your code in a standards-compliant manner which behaves well with the latest versions of Chrome, Firefox, Opera, etc.

I was looking for a good option for IE10 and below CSS styling (but it would work for IE8 only as well), I didn't wanted an extra stylesheet for readability and I came up with this idea:

<!--[if lt IE 10]><div class="column IE10-fix"><![endif]-->
<!--[if !lt IE 10]><!--><div class="column"><!--<![endif]-->

I declare my div or whatever you want with an extra class, this allows me to have extra CSS in the same stylesheet in a very readable manner.

It's W3C valid and not a weird CSS hack.

ie8 only: the best way is

body{background:#f00\0/;}

\0/ is the Ie8 CSS Hack

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!