CSS HACK and FAQs

First, CSS commonly used hack

1. Mode one: Conditional annotation method

This way is the exclusive hack method of IE browser, Microsoft Official recommended the use of hack way. Examples are as follows

effective only under IE<!--[If ie]> this text is only displayed in IE browser <! [EndIf] -only takes effect under the IE6 .<!--[If IE 6]> this text is displayed only in IE6 browser <! [EndIf] -only valid for versions above IE6<!--[If GTE ie 6]> this text only appears in the IE6 above (including) version of IE browser display <! [EndIf] -is not effective on IE8.<!--[if! IE 8]> This text in non-IE8 browser display <! [EndIf] -non-IE browser effective<!--[if! Ie]> This text is only displayed in non-IE browser <! [EndIf] -

2. Mode two: Intra-Class attribute prefix method

Common prefix symbols: * (ie 7/6) +(ie 7) _(ie 6)

Common suffix symbols: (ie 8/9/10) \9\0(ie 9/10) !important(only IE6 not recognized)

<class= "Div1"></div>

div{height:500px;} */* Please note that the following code sequence can not be wrong, otherwise the effect will be error */.div1{    background-color:red\0;     /* IE 8/9/10 */    background-color:blue\9\0;  /* IE 9/10*/    *background-color:yellow;   /* IE 7/6*/    _background-color:gray;     /* IE 6*/}/* specially written for IE10 style effects */.ie10. div1{    background: #000;    Color: #fff;}

Ii. Common compatibility tips

1. You can avoid many unnecessary problems by reset the Body,ul,form and other label styles in the public style.

2. Center the problem.

1). Center vertically.

Set Line-height to the same height as the current Div, and then through Vertical-align:middle. (Note that the content does not wrap.)

2). Center horizontally.

margin:0 Auto; (of course not everything)

You can put any item within the body of the HTML inside, and the item will automatically get the equal left and right boundary values to ensure the center display. However, this is IE6

There are still problems in previous versions of the browser and will not be centered, so you must

Modify the following:

body {text-align:center;} #content {text-align:left; width:700px; margin:0 Auto;}

The body of the setting will lead to the center of the content, but even all the text is also centered, this is probably not the effect you want, for this #content div also specify a value: Text-align:left

3.cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can

4. If the text is too long, the too long part becomes an ellipsis display: Ie5,ff invalid, but can be hidden, IE6 effective <div style= "width:120px;height:50px;border:1px solid Blue Overflow:hidden;text-overflow:ellipsis "> <NOBR> is like a line of text, very long, a row in the table cannot be displayed. phontol.com</nobr> Fixed width Chinese character truncation: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; (however, only the truncation of the text on one line can be handled, Multiple rows cannot be processed. ) (IE5 above) FF cannot, it is only hidden.

5.IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height.
For example, to set the background image, this width is more important. To solve this problem, you can:

width:80px; height:35px;}

Html>body #box {

Width:auto;

Height:auto;

min-height:35px;

}

6. Double the distance generated by the floating IE

#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore} Here's a look at block and inline two elements: The block element is characterized by the ability to always start on new lines, height, width, row height, and margin control (block elements); The inline element is characterized by an uncontrolled (inline element) on the same line as other elements; #box {display:block;//can simulate a block element display:inline for inline elements;//Achieve the effect of the same row arrangement diplay:table;

7. Why the text in FF cannot open the height of the container

The container of fixed height value in standard browser is not open like IE6, then I want to fixed height, and want to be able to be open how to set it? The way is to remove height setting min-height:200px; Here in order to take care of the IE6 do not know min-height can be defined as:

Height:auto!important;

}

8. Clear Floating

. hackbox{display:table;//Display the object as a block-element-level table} or. hackbox{Clear:both;} or join: After (pseudo object), set what happens after the object, usually in conjunction with content, IE does not support this pseudo-object, non-IE browser support, so does not affect the Ie/win browser. This is the most troublesome ...

#box: after{  Content: "."; display:block; height:0; clear:both; visibility:hidden;}

9.DIV floating IE text generates 3 pixel bug

The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px away from the left.

#box {float:left; width:800px;} #left {float:left; width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This sentence is the key}

HTML code

<div id= "box" > <div id= "left" ></div> <div id= ' right ' ></div></div>

10. Attribute selector (this is not compatible, is a bug to hide CSS)
p[id]{}div[id]{}
This is hidden for IE6.0 and IE6.0 versions, and the FF and opera functions
There is a difference between the property selector and the child selector, the range of the child selector is reduced in form, the range of the property selector is larger, such as P[id], and all P tags have the same type of ID.

11.IE Hide and seek problem

When the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems.

Some content does not show up when the mouse selects this area is found content is indeed on the page.

WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.

12. Highly non-adaptable

Height intolerance is when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or paddign.

Example: <div id= the contents of the "box" > <p>p object </p> </div>

Css:

#box {background-color: #eee;}

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

Workaround: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.

12.FF support!important, IE is ignored, can be used!important to set the FF special style