Common situations and corresponding methods of css compatible debugging

1. CSS HACK

The following two methods can solve almost all HACKs today.

1, !important

With IE7’s support for !important, the !important method is now only for IE6 HACK. (Pay attention to the writing. Remember The position of the statement needs to be advanced in advance.) 需要 & lt; style & gt;

#wrapper

{

width: 100px! Important;

width: 80px;} & lt;/style & gt;

2, ie6// IE77 for FireFox

*+html and *html are IE-specific tags, which are not supported by firefox yet. And *+html is a IE7-specific tag.

Note:

*+html Right IE7's HACK must ensure that there is the following statement at the top of the HTML:

2. Universal float closure

About clear float The principle can be found in [How To Clear Floats Without Structural Markup]

Add the following code to Global CSS, and add class="clearfix" to the div that needs to be closed. It works repeatedly.

3. Other compatibility tips

1, set padding for div under FF will cause the width and height to increase, but IE will not. (can be solved with !important)

2, centering problem.

1). Vertically centered. Set line-height to the same height as the current div, and then use vertical- align: middle.(Be careful not to wrap the content.)

2). Horizontally centered. margin: 0 auto;(Of course it is not omnipotent)

3. If you need to add styles to the content in the a tag, you need to set display: block; (Common in navigation tags)

4. The difference in understanding of BOX between FF and IE leads to a 2px difference. There are also problems such as double the margin of a div set to float in IE.

5. The ul tag has list- by default under FF. style and padding. It is best to declare it in advance to avoid unnecessary trouble. (Common in navigation tags and content lists)

6. Do not set the height of the div as an external wrapper. It is best to add overflow: hidden. to achieve the goal. Highly adaptive.

7, about hand cursor. cursor: pointer. And hand is only applicable to IE.

1 CSS styles for firefox ie6 ie7

Now most of them use !important to hack, for ie6 and firefox The test can be displayed normally,

but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! I found a good hack for IE7 using "*+html". Now browse it with IE7 and there should be no problem.

Now write a CSS like this:

#1 { color: #333; }

* html #1 { color: #666; }

*+html #1 { color: #999; }

Then The font color is #333 under Firefox, #666 under IE6, and #999 under IE7.

2 Centering problem in css layout

The main style definition is as follows:

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Explanation:

First define TEXT-ALIGN: center in the parent element; this means that the content in the parent element is centered; for IE, this setting is enough.

But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" when defining the child element. It should be noted that if you want to use this method to center the entire page, it is recommended not to use it. In a DIV, you can split multiple divs in sequence. Just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.

3 Different interpretations of the box model

#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}

4 Double distance generated by floating ie

#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore the float}

Here we will explain the two elements block and inline in detail. The characteristics of the Block element are: always in the new The start, height, width, line height, and margins on the line can all be controlled (block elements); the characteristics of the Inline element are: on the same line as other elements,... cannot be controlled (inline elements);

#box { display:block; //You can simulate inline elements as block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;

IE does not recognize the definition of min-, but in fact it converts normal Width and height are treated as if there is min. This will cause a big problem. If you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. .

For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类：

然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
也可以直接写成:
#container{ min-width:600px; *width:600px;}
这样就达到不管IE还是FF都是最小宽度为600PX了

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，

所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}

HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

margin 或paddign 时。

例：

p对象中的内容

CSS: #box {background-color:#eee; }

#box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }

Solution: above and below the P object Add 2 empty div objects each with CSS code: .1{height:0px;overflow:hidden;} or add the border attribute to the DIV.

The following method is an analysis method from another perspective:
Browser BUG processing methods are compiled (part) for sharing with friends who like web design:
1. Asterisk *
IE can recognize *, standard browsers such as FF * is not recognized.
Example: p { color:yellow; *color:red;}
Similar ones are
+ plus sign
Only IE explains
p{color:red; important
IE6 and below will ignore this style, IE7 FF will support it;
p{color:red !important;color:yellow;}
IE7 FF will display red in IE6 as yellow
Note here that the !important method is just as above The format is ignored by IE6 and below. Other methods of increasing style weight can be used universally.
3. Underline.
IE6 and below versions will use this style, others will be ignored
p{color:red; _color:blue}
4. Note:
p{color:red};
This style can be applied and displayed in IE6, It will not be processed in IE5 and below, so it can be distinguished for IE5/6
5. @IMPORT:
Use URL in @IMPORT to import styles. The standard usage is to put the value in the URL in quotes. As follows @IMPORT URL("newstyle.css"); This usage can be supported by browsers above IE5 and FF, thus realizing separate processing of IE4 styles.
In addition, there is another method:
@IMPORT URL("noie .css") screen;
Screen is an option for specifying the device type, screen is used for screen display, and print is used for printing device display. However, IE does not support this method, all IE browsers, so that IE and The difference between FF.
6. Attribute selector: Used to select objects with specific attributes
span[class=left]{color:blue}
span[title]{color:red;}
IE6 does not support it, but it works in FF Normal, so IE and FF can be processed separately.
In actual development, IE and FF are often processed separately. You can use the following code:
#content{
color:red;
}
[xmlnx] #content {
color:blue
}
I think this method is very practical and is often used. I recommend it to friends. If you need more detailed instructions, I can post it again.选择7. Sub-object selection:
span & gt; p {color: red}
IE6 is also not supported, it can also be used to distinguish IE and FF
8, TANTEK method
#Content {
color: blue;
voice-family: " "}" "; I voice-Family: Inherit;
Color: Red;
}
The code above is used after using Voice-Family, and the following color: red will not be analyzed by the browser of IE5.5 and below. Therefore, the text color will appear red on IE6/7/FF, and will appear blue on IE5.5 and below browsers;
In addition, there is another way to deal with voice-family:
#content{
                                                           . Voice-Family: "}"
Voice-FAMILY: Inherit;
Color: Blue;
}
Use this method, which will make the text of the IE6 and the following versions of browsers and FF browser red, and IE5 and below versions are viewed The browser appears blue!
9. Escape attribute
p{width:200px;}
Will be ignored below IE5.5. Note: Backslash characters cannot appear before 0-9 or letters a-f
10. Conditional comments in IE
1. Introduction to conditional comments
Conditional comments in IE are excellent for IE versions and non-IE versions The distinguishing ability is a commonly used hack method in WEB design.
Conditional comments can only be used in IE5 and above.
If you have multiple IEs installed, the conditional comments will be based on the highest version of IE.
The basic structure of conditional comments is the same as HTML comments (). Therefore browsers other than IE will treat them as ordinary
comments and ignore them completely.
IE will use the if condition to determine whether to parse the content in the conditional comment like normal page content.
2. Conditional comment attributes
  gt : greater than, select a version above the conditional version, excluding the conditional version
lt : less than, select a version below the conditional version, excluding the conditional version
  gte : greater than or equal, select a version above the conditional version Version, including the conditional version
lte: less than or equal, select the version below the conditional version, including the conditional version
! : Select all versions except the conditional version, no matter high or low
3. How to use conditional comments
Pay attention to the <> in the code ; Replace with the corresponding greater than or less than sign in English



The following code is a conditional comment running under non-IE browsers
You are not using Internet Explorer
You are using Internet Explorer version 6 or a non-IE browser