CSS practical skills and FAQs

Solution to the IE6 background image cache bug: the background image cache bug is one of the many common bugs in IE6.

A. Method 1: use Javascript scripts [recommended]

<! -- [If IE 6]>
<Script type = "text/javascript"> <! --
Document.exe cCommand ("BackgroundImageCache", false, true );
// --> </Script>
<! [Endif] -->

B. Method 2: Use the CSS expression html {}
{
Filter: expression(document.exe cCommand ("BackgroundImageCache", false, true ));
}

IE6 has always been a pain point for front-end workers. If you define the maximum width of an image in a layer, you will find that MAX-WIDTH and MIN-HEIGHT are not valid for IE6. 

# Div img {
Max-width: 600px;
Min-width: 600px;
_ Width: expression (documentElement. clientWidth> 600 )? "600px": "auto");/* defines the maximum width of IE6 */
_ Width: expression (documentElement. clientWidth <600 )? "600px": "auto");/* defines the smallest width of IE6 */
}

If the comments in HTML are written to CSS, all the CSS in the comments will be invalid. For example: 

 

. E_catatree {
Height: 21px;
Color: # ccc;
Text-align: right;
Line-height: 20px;
Border-top: 1px # ccc solid;
Margin: 0 20px;
}
<! -- End -->
/* Add to shopping cart page */
# Cartmain {
Width: 958px;
Background: url (../img/bg_reg.gif) repeat-x top;
Border-right: 1px # e9e9e9 solid;
Border-bottom: 1px # e9e9e9 solid;
Border-left: 1px # e9e9e9 solid;
Margin: 5px 0;
}

In the above style, <! -- End --> the commented CSS is invalid ..

 

Stereoscopic effect when the button is pressed:

A: hover {position: relative; top: 1px; left: 1px}/* It must be relatively positioned */

Add code to favorites:

<Script>
Function addfavorite ()
{
If (document. all)
{
Window. external. addFavorite ('HTTP: // bbs.blueidea.com ', 'classic BBS ');
}
Else if (window. sidebar)
{
Window. sidebar. addPanel ('classic BBS ', 'HTTP: // bbs.blueidea.com ',"");
}
}
</Script>
<A href = "#" onclick = "addfavorite ()"> Add a classic forum to favorites </a>

Implement the small triangle effect by defining em:

*{
Font-size: 14px;/* the font size must be equal to the font size */
}
Em {
Display: block;
Font: 0/0 "";/* after self-exploration, only under is the most standard */
Border: 7px solid;/* The larger the border value, the larger the triangle */
Border-color: # fff #444;/* experiment on your own by changing the color value */
Margin-top: 5px
}

Display line-block HACK:

. Menu {
Display:-moz-inline-stack;/* The exclusive FF can also be defined using-moz-inline-box */
* Display: inline;
Zoom: 1;/* the last line and this line are used to activate layout of IE6/7 to achieve similar results */
}

Usage of the transparency filter:. Navbg {
Filter: alpha (opacity = 40);/* IE */
-Moz-opacity: 0.4;/* Moz + FF */
Opacity: 0.4;/* supports CSS3 browsers (FF 1.5 is also supported )*/
}

 

 

 

2. horizontal center (fixed width only)

I think everyone knows this, for example:

Div # container {margin: 0 auto ;}
3. Make full use of absolute and relatively in position

4. center or center (vertical)

Div. popup {height: 400px; width: 500px; position: absolute; top: 50%; left: 50% ;}
Div. popup {margin-top:-200px; margin-left:-250px ;}
Memo:

· The fixed values of width and height must be specified;

· The position value is absolute;

· Specify top and left as 50% respectively;

· Set half of the negative values of height and width of margin-top and margin-left respectively. The value can also be abbreviated as: margin:-200px 0 0-250px;