CSS code compatible browser Tips Summary

Resolve CSS Browser compatibility issues, multi-year map work summary:

* * The default value of the outside margin margin, padding padding under each browser * *

Html,body,a,h1,h2,h3,h4,h5,h6,p,div,ul,li,ol,dl,dt,dd,img,form,input,textarea,select,fieldset {margin:0px; padding:0px}

/* Unified title Common style Text-shadow:gray 0px 0px 5px; Text Shadow font-weight:800 Smooth Bold * *

H1,h2,h3,h4,h5,h6,b,strong {font-family:arial,verdana,sans-serif; font-weight:800}

/* Web page Common properties: Font, text color, background color, etc. * *

Body,table,input,select,textarea {Font-family:simsun, "song Body", Arial; font-size:12px;}

Body, table {Background-color:white}

Body {color: #636363; font-size:12px}

/* Control English characters for continuous automatic line change * *

div,span,th,td,dt,dd,h1,h2,h3,h4,h5,h6,em,strong,i,a,b,a,p {word-break:break-all; word-wrap:break-word;}

UL,OL,DL {List-style-type:none}

Select,input,select {Vertical-align:middle}

img {border:0 none; text-align:absmiddle; background-color:transparent}

/* Table Center Display * *

Table {margin-left:auto; margin-right:auto; border-width:0 None}

/* Default link style settings * *

A {color: #000; Text-decoration:none}

a:hover {Text-decoration:underline}

/* Go to a dotted box cdl:clear dotted line * *

. CDL, a:active {outline:none; Blr:expression (This.onfocus=this.blur ())}

: Focus {Outline:none}/* for Firefox * *

/* Clear FLOAT * *

. clear {Display:block!important; clear:both; height:0px; line-height:0px; font-size:0}

/* commonly used, using the initials of the word: it is important to maintain a good naming style: * *

. Tdn {Text-decoration:none}/* link is not underlined * *

. OFH {Overflow:hidden}/* Overflow hidden */

. tal {Text-align:left}/* Content left-aligned * *

. tar {text-align:right}/* Content right-aligned * *

. TAC {Text-align:center}/* Content centered * *

. fl {Float:left}/* Left float * *

. fr {Float:right}/* Right float * *

. m0a {margin:0 Auto}/* inside the container horizontally *

. bn {border:0 None!important}/* No border * * *

3. Accumulation of skills (continuous supplement ...)

1) using margin:0 Auto; To achieve horizontal center, the width of the container must be defined at the same time to be effective;

2 about border, if you want to define the four sides of the div color is different, and the thickness and style are the same, you can write:

Div.border2 {border:1px solid; Border-color:color1 color2 Color3 Color4}

Four colors in turn are upper, right, down, left color

3 compatible with all browsers can display the translucent effect of the wording

. alpha50 {

Filter:alpha (OPACITY=50); /* Support IE Browser * *

-moz-opacity:0.5; * * Support FireFox Browser * *

opacity:0.5; /* CSS Standard. This property supports Firefox, Safari and Opera * *

}

4 using media directives to introduce two kinds of CSS: printed version of the CSS and screen display of CSS

5 We can use Page-break-after,page-break-before to control the paging when printing

6 Use Indentation (text-indent) to display pictures, while hidden text (for SEO-friendly)

. logo {Background:url (xxx.gif) no-repeat; width:160px height:60px; Text-indent: -2000px;}

< H1 class= "logo" > Products

7) 100% of the height

To allow < div id= "content" ></div > containers to automatically extend to the entire height of the page, we need to tell and the container height should be the height of the entire page.

HTML {min-height:100%; _height:100%;}

body {margin:0; padding:0; min-height:100%; _height:100%;}

#content {padding:0 20px 0 20px; margin:auto; font:1.5em Arial, Verdana; width:960px; min-height:100%; _height:100%; }

8 Cross-browser box shadow effect instance page

. Shadow {

-moz-box-shadow:3px 3px 4px #000;

-webkit-box-shadow:3px 3px 4px #000;

box-shadow:3px 3px 4px #000;

/* for IE 8 * *

-ms-filter: "Progid:DXImageTransform.Microsoft.Shadow (strength=4, direction=135, color= ' #000000 ')";

* For IE 5.5-7 * *

Filter:progid:DXImageTransform.Microsoft.Shadow (strength=4, direction=135, color= ' #000000 ');

}

9 Day of mourning Web site gray CSS code

Html{filter:progid:dximagetransform.microsoft.basicimage (grayscale=1);}