Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to solve common compatibility problems in CSS". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to solve common compatibility problems in CSS" can help you solve the problem.

The problem of browser compatibility is usually due to the fact that different browsers have different parsing of the same piece of code, resulting in inconsistent display of the page.

The browser we are talking about here mainly refers to IE6/IE7/IE...FireFoxChromeOperaSafari and so on. But for more compatibility, the struggle between IE6/IE7/FF is considered.

Let's talk about CSSHack first.

In order to make the page form a unified effect, we need to write a parsable CSS style for different browsers or different versions, so we call the process of writing CSS for different browsers / versions CSShack.

There are mainly three kinds of CSShack: IE conditional annotation, CSS attribute prefix and selector prefix.

(1) IE conditional annotation method, that is, add conditional comments to distinguish the IE browser or the corresponding version in addition to the normal code, and the browser or version number that meets the conditions will return to execute the code inside.

(2) CSS attribute prefix method, that is, add a prefix to the attribute of css. For example, * can be recognized by IE6/IE7, but _ can only be recognized by IE6, IE6-IE10 can recognize "\ 9", IE6 can't! importantFireFox can't recognize * _\ 9

You can first use the "\ 9" tag to separate the IE, then use "*" to separate the IE6/IE7, and finally use "_" to separate the IE6.

.type {

Color:#111;/*all*/

Color:#222\ 9 Placement /

* color:#333;/*IE6/IE7*/

_ color:#444;/*IE6*/

}

So you can bring a specific color to a particular version according to the priority.

You can first use the "\ 9" tag to separate the IE, then use "*" to separate the IE6/IE7, and finally use "_" to separate the IE6.

.type {

Color:#111;/*all*/

Color:#222\ 9 Placement /

* color:#333;/*IE6/IE7*/

_ color:#444;/*IE6*/

}

So you can bring a specific color to a particular version according to the priority.

Why is it so-so? If you look at the following example, IE6 seems to recognize it! important

In fact, you can also see that when the attributes are written together in {}, the former will definitely be overwritten by the latter. For! important to be valid, it should be placed between multiple {}.

H _ 2 {colorburet _ f00 _ importance;}

H2 {color:#000;}

H3 {colorvans / colors / colors

Test1

Test2

Description: in standard mode

The "-" minus sign is IE6's proprietary hack

"\ 9" IE6/IE7/IE8/IE9/IE10 is effective.

"\ 0" IE8/IE9/IE10 takes effect. It is the hack of IE8/9/10.

"\ 9\ 0" is only valid for IE9/IE10 and is the hack of IE9/10.

(3) the selector prefix method, as the name implies, is to prefix the selector.

IE6 recognizes * p {color:red;}

IE7 can recognize * + p {color:red;}

@ mediascreen\ 9 {...} is only valid for IE6/7

@ media\ 0screen {body {background:red;}} is only valid for IE8

@ media\ 0screen\, screen\ 9 {body {background:blue;}} is only valid for IE6/7/8

@ mediascreen\ 0 {body {background:green;}} is only valid for IE8/9/10

@ mediascreenand (min-width:0\ 0) {body {background:gray;}} is only valid for IE9/10

@ mediascreenand (- ms-high-contrast:active), (- ms-high-contrast:none) {body {background:orange;}} is only valid for IE10, etc.

Let's look at the main compatibility issues:

(1) the most important and most common is that browsers have different default support for tags, so if we want to unify, we need to carry out CSSreset. The simplest initialization method is * {margin:0;padding:0;}, but it is not recommended, and it is not perfect.

Post a Taobao style initialization ~

Body,h2,h3,h4,h5,h6,h7,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0;padding:0;}

Body,button,input,select,textarea {font:12px/1.5tahoma,arial,\ 5b8b\ 4f53;}

H2,h3,h4,h5,h6,h7 {font-size:100%;}

Address,cite,dfn,em,var {font-style:normal;}

Code,kbd,pre,samp {font-family:couriernew,courier,monospace;}

Small {font-size:12px;}

Ul,ol {list-style:none;}

A {text-decoration:none;}

A:hover {text-decoration:underline;}

Sup {vertical-align:text-top;}

Sub {vertical-align:text-bottom;}

Legend {color:#000;}

Fieldset,img {border:0;}

Button,input,select,textarea {font-size:100%;}

Table {border-collapse:collapse;border-spacing:0;}

(2) IE6 double distance bug: after floating float is added to the block attribute tag, if there is also a margin value in the floating direction, the margin value will be doubled. In fact, the main problem is that some elements will be squeezed to the second line.

Html,body,div {margin:0;padding:0;}

.wrap {width:200px;height:200px;border:1pxsolid#333;}

.box {float:left;/*display:inline*/;margin-left:10px;width:80px;height:80px;background-color:green;}

There are two ways to solve the problem:

1. Add display:inline to the float element and display it normally.

two。 That is, hack handles it. Do _ margin-left:5px to IE6.

(3) similar to the above, it also belongs to the IE6 double-spaced bug: inline attribute tag. In order to set the width and height, we often set it to display:block; to cause the above problems.

The solution is also Tianjin display:inline;, but in this way we can't set width and height, so we need to add another display:table.

So after you set up display:block, add display:inline and display:table

(4) in the case of upper and lower margin coincidence, the two adjacent pmargin-leftmargin-right will not coincide, but the adjacent margin-topmargin-bottom will.

.box1 {width:200px;height:200px;border:1pxsolid#333;}

.mt {margin-top:10px;}

.mb {margin-bottom:10px;}

(5) there are differences in parsing img tags in some browsers. Img is in-line and is usually followed by discharge, but in some cases a gap suddenly appears. The solution is to give it a floating float.

(6) the tag attribute min-height is incompatible, so you should change it slightly when you use it. I'll tell you what:

.box {minmuri heightbloom 100px exiting heightblots autoexamples importantposition heightblots 100pxTracement overflow bloggers visible;}

(7) most of the time, you may wonder that the style is confused after the hyperlink visit, and the hover style does not appear. In fact, it is mainly the sorting problem of its CSS attribute. Generally speaking, it is best to follow this order: L-V-H-A

The simple notation is lovehat.

A:link {} a:visited {} a:hover {} a:active {}

(8) by default, text smaller than 12px will be parsed according to 12px by default under chrome. The solution is to add attributes to it:

-webkit-text-size-adjust:none

(9) the picture with png24 bit will have a background under IE6, so it is best to use png8 format.

(10) because there are two box modes: the IE box mode and the W3C standard mode, the actual width of the object should also be noted.

IE/Opera: actual width of the object = (margin-left) + width+ (margin-right)

Firefox/Mozilla: actual width of the object = (margin-left) + (border-left-width) + (padding-left) + width+ (padding-right) + (border-right-width) + (margin-right)

(11) there is also a problem with mouse gestures: the cursor property of FireFox does not support hand, but supports both of pointer,IE, so pointer is used for compatibility

(12) there is a saying that FireFox cannot parse the abbreviated padding property settings.

For example, padding5px4px3px1px; must be changed to padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px. But I tried it and found that it can still be parsed. Is it because of the version?

(13) when eliminating indentation of ul, ol and other lists, the style should be written as follows: list-style:none;margin:0px;padding:0px; where the margin attribute is valid for IE and the padding attribute is valid for FireFox

(14) transparency of CSS control: generally speaking, opacity:0.6;IE directly to filter:alpha (opacity=60).

But there is a problem under IE6, so it has to be filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).

(15) sometimes a gap appears at the bottom of the picture, usually under FF and IE6, such as

Generally, you can add a vertical-align attribute to img, such as topmiddle

Img {verticle-align:center;}

(16) the height of p under IE6 cannot be less than 10px.

For example, if you define a high 2px line, both FF and IE7 are normal.

But IE6 is 10px.

There are two ways to solve this problem: add the overflow attribute or set the fontsize size to a height size such as:

& nbps

This is the end of the content about "how to solve common CSS compatibility problems". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.