Is it possible to apply CSS selectively depending on the browser being used?_问答_开发者

Is it possible to apply CSS selectively depending on the browser being used?

开发者 https://www.devze.com 2023-01-22 19:03 出处：网络

I\'ve a white fieldset on a blue background. I didn\'t apply any padding ins开发者_如何学编程ide the fieldset, but it looks like there\'s a 5px padding applied for all the other browsers: Except for I

相关专题：css

I've a white fieldset on a blue background. I didn't apply any padding ins开发者_如何学编程ide the fieldset, but it looks like there's a 5px padding applied for all the other browsers: Except for Internet Explorer. If I apply 5px, then IE looks fine, but there is too much padding for the rest of the browsers. Seems like they add up.

That's the most obvious problem, but there are a couple of other less noticeable problems where only Internet Explorer behaves differently from the rest of the browsers. So, is there a way of applying CSS selectively? For instance, if(IE then apply 5px padding).

Thanks for helping

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

The above targets specific instances of IE since a bug might be version specific.

When creating your rule for IE6 and IE7 for example use

body.ie6 wrapper{background-color:#0000ff;}
body.ie7 wrapper{background-color:#00ff00;}

write your body tag like so:

<!--[if IE]> <body class="ie"> <![endif]-->
<!--[if !IE]><!--><body><!--<![endif]-->

then write your specific ie rule with

.ie fieldset { ... }

(no extra requests on IE to handle specific bugfixes, no star hack or other tricks that make your css invalid)

IE 'hacks' such as leading the statement with a * let IE use the style, but nothing else.

http://www.webdevout.net/css-hacks#unrecommended-asterisk_prefix

Also conditionals - but these have to be IN THE HTML, NOT CSS.

http://www.quirksmode.org/css/condcom.html

You'll need to use some sort of CSS "hack" in order to target a particular browser. See this guide for a detailed explanation of the different options available to you.

Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately.

You can use conditional stylesheets...

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

There is a nice article here: IE Conditional Stylesheets

I would advise against CSS hacks (such as the star hack) in favor of a better solution, IE Conditional Comments. You can create a separate stylesheet for IE, and even each major version of IE and put your rules in a separate stylesheet.

There are a number of ways to do CSS conditionally depending on browser. If the browser in question is IE, then I'd suggest that conditional comments are the best solution.

However, if you're having problems with padding, it's quite possible that you're simply encountering problems with using the wrong doctype (or more likely not using a doctype at all).

If this is the case, you should add a doctype to the top of your HTML. This will resolve a lot of the odd cross-browser layout issues.

There are some very complex-looking doctypes you can use for various versions of HTML and XHTML, but the best doctype to use is the simplest, which is the new HTML5 doctype:

<!DOCTYPE html>

This will work in all browsers (even those that don't actually support HTML5 yet).

Hope that helps.

Well, seems everybody said about conditional comments for including a second stylesheet with IE hacks needed, thus keeping everything under control, "hack free" in front of validators...

I would not make different. I use the same approach on my projects. But for this specific problem, I think your solution can be inside CSS itself.

A property named box-sizing. Read about it and check if it fixes your problem. http://www.quirksmode.org/css/box.html