Creating layout for a specific browser

问题:

I have an asp.net-mvc3 website. I created all the layout using css. The layout is exactly how I want it on firefox and Chrome, but on internet explorer it is in a big mess.

So now i am trying to fix it.

But the problem is that I want to fix it without messing it on firefox or chrome.

Do I have to restart from scratch and rebuild the layout? or is there a way to specify a certain layout for a specific browser.

Something like this:

If Internet Explorer then use this css sheet or style, else use what I allready have.

回答1:

use these(put it on the head):

Target ALL VERSIONS of IE

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 7 ONLY

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

Target IE 6 ONLY

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

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

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

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

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

回答2:

You have to identify the problem(s) (which likely have something to do with using Quirks mode) and address them.

There isn't a magic bullet that solves all IE woes, and providing a completely different stylesheet is usually much more work then you need to do.

You can provide code specifically for IE using conditional comments, but in the vast majority of cases this should be applied with a light touch.

回答3:

You need conditional IE stylesheets.

Create your stylesheets that you want only IE to use, and put them in the document head inside IE specific code. For example:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

This will call the all-ie-only.css stylesheet on any version of IE, but you can change the code to be specific versions, or even a group of versions, e.g. "less than IE9"

This is a great resource that has all the info - http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ (Dan has copied and pasted exact content in this answer for you)

回答4:

I've managed to be able to get very consistent design across IE, Safari, Opera and Firefox by using a complete reset.css stylesheet.

The reset.css will "0 out" the differing preset standards for each browser and then load your actual stylesheet on a clean slate.

Only after testing the reset.css and stylesheet-name.css do I create browser specific hacks. This is the best practice for consistent display across multiple browsers.

The following link is a good example: http://meyerweb.com/eric/tools/css/reset/

回答5:

What you're asking for is an <!--[if IE]> tag. This website goes through it in detail.

However, in the future you can build a site to work cross platform without the need for If IE tags. It all depends on your CSS and markup.