What CSS code do I use to make my website render in different browsers?_问答_开发者

What CSS code do I use to make my website render in different browsers?

开发者 https://www.devze.com 2023-03-05 18:40 出处：网络

Im at college and have completed my first year. I want to continue web applications as a hobby. I have create a functioning web application with MS Visual Studio 2010, but I know I need to make it com

相关专题：css

I recognise that I need to test it in other broswers and see the discrepancies that arise, but how do I fix them. My teacher say I need CSS code for each browser, but how do I do this?

T开发者_运维技巧hanks in advance for any help

Include a CSS reset stylesheet. You should then include a default style to get sensible margins and font sizes, then add your own CSS on top of that.

The approach I use is to write the CSS for my site and test it only in Google Chrome. You can use Firefox 4 too. The reason I use these browsers is that if my CSS looks good in them, I'm pretty sure it's standards compliant and has a great chance of looking good as newer browsers come out.

Then, I take a look at my site in IE. Now, thankfully, you don't really have to worry about IE6 any more. Almost everyone's ignoring it. So you have to think about your audience. Do you think most of them would use IE9 or IE8? If you're ok with IE9, then it's almost certain your site looks great without any modifications because it's a very standards compliant browser. If you need IE8 compatibility, then add another CSS stylesheet and make it so it only shows up if the browser is IE. Your tag would look like this:

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

So now you can put any style fixes in that stylesheet without hurting the style in your main stylesheet. Keep this to the absolute minimum so that it's easy to maintain.

As an aside, if it's just a site for you to have fun with, pick a browser you like and make sure it works in that. Then just put a message at the bottom saying what browser displays your site best.

My teacher say I need CSS code for each browser

He is wrong if that's literally what he said. If you know what you're doing, you can get 99% of everything to work the way you want cross-browser. For IE (the problem browser and usually definition of "cross-browser", you can use conditional comments to load different stylesheets that target specific IE versions.

Common things people trip up on:

Floats
Positioning
The Box Model

If you're having issues in one browser (and that browser is not IE) but it works in another, chances are (but not always) you are making a mistake somewhere. Before any debugging attempts, always, always validate your html first. A lot of "CSS issues" are actually HTML issues that different browsers respond to in different ways.

And then, there's this site that I've found helpful in the past:

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

You can target IE with conditional comments.

For other browsers you can use vendor-prefixed properties to explicitly target those browsers -moz-, -webkit- etc. Otherwise for non-IE just use standards compliant (x)html and, for the most part, they'll be fine with it.

Try conditional stylesheets / hacks: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/