CSS hack Technology (i)

This world is a lot of things, browser can be counted to do one, especially the IE browser. There are a lot of spit slots on the browser, I will not be here to spice up. But the spit groove after all is only vent a moment of anger, solve the problem is the key, today we talk about browser (style) compatible technology--css Hack.

Browser incompatibility There are many aspects, some JavaScript scripts are incompatible, there are some styles (CSS) incompatible, and CSS hack to solve the problem of incompatible style. In the style (CSS), the major browsers have a lot of unusual parsing. This article will focus on the famous "box model" browser-compatible Method! In the end, will give you a nearly seconds to kill all major browser CSS compatible code ~

First, let's see why Internet Explorer has so many compatibility issues with the boxed model. The usual form of expression is that the whole page is going to be a bit of content ~

is a standard box model, box is the entity content of the page elements, then the outer layer is padding (padding), Border (border), margin (margin). That is, an element on a webpage that actually occupies the width

L = width + padding + border + margin.

Then let's see how the IE6 browser is parsed.

What we can see is that the width and height,padding and the border are included inside. So now a page of elements that actually occupy the width

L = width + margin.

So, as long as your CSS does not use too many horizontal padding values, the page will not have a serious dislocation. Of course, the premise is that your other CSS writing is in line with the standard ~

So how do we solve this problem? Obviously, the simplest way is to define a different width for IE. Then there are several ways.

One, <!--[if ie]>

IE Browser can parse out <!--[if ie]><! The code contained within the [endif]-->. Other browsers use it as a comment. So you can add anything that you just want IE to parse.

<!--[if Ie]><link href= "Ie_styles.css" rel= "stylesheet" type= "Text/css"/><! [endif]-->

Then, we can also define the impact on those versions of IE.

For example:<!--[if Lt IE 9]> is less than IE9 version, LTE means less than equals, GT represents above, GTE represents above equals.

In addition, for non-IE browsers, this can be used

<!--[if! ie]><!-->  <link href= "notie_styles.css" rel= "stylesheet" type= "Text/css"/><!--<![ Endif]-->

Note that it differs from the <!--[if ie]>, where content contained in IE is treated as a comment, not ie, as normal code parsing.

Second, CSS vulnerabilities

The above method is actually ie intentionally for the analytic method, should be considered his bad CSS parsing method of a compensation bar, and the next approach is to use the browser itself to parse the vulnerability of CSS, to implement CSS hack!

The above code, in different browsers "CSS Hack!" "will show a different color out.
Firefox and Opera show Black (#000000), IE8 shows Blue (#0000FF), IE7 shows Yellow (#FFFF00), IE6 shows Red (#FF0000), Chrome and Safari show Green (#00FF00).
As long as you change the color to any property you need to control, you can implement the hack~ of its properties in any major browser
In particular, it is important to note that the writing is strictly in accordance with its order of precedence.
Today introduced two kinds of CSS hack methods, I hope you have a little use for it ~
CSS hack Technology (i)