Geek asks and answers

Creating a layout for a specific browser

I have an asp.net-mvc3 website. I created the whole layout using css. The layout is exactly how I want it on Firefox and Chrome, but in Internet Explorer it is in a big mess.

So now I'm trying to fix it.

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

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

Something like that:

If Internet Explorer then uses this sheet or css style, use what I already have.

+1
source share
5 answers

use them (put it on your head):

Purpose ALL VERSIONS OF IE

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

Target all EXCEPT IE

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

ONLY ONLY for IE 7

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

IE 6

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

IE 5

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

IE 5.5

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

IE 6 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 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]-->

IE 8 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]-->

IE 6

<!--[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 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]-->

IE 8

<!--[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]-->
+6

IE.

, IE, IE-. :

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

all-ie-only.css IE, , . " IE9"

, - http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ (Dan )

+1

(, , - Quirks) .

, IE, , .

IE, , .

+1

IE, Safari, Opera Firefox, reset.css.

reset.css "0 out" , .

reset.css stylesheet-name.css . .

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

+1
source

What you are asking for is a tag <!--[if IE]>. This site details this.

However, in the future you can create a cross-platform site without the need for IE tags. It all depends on your CSS and layout.

0
source

More articles:


All Articles