CSS common code Daquan and CSS compatibility (reprint)

CSS Common Quick Development Code summary (long-term update), including CSS3 code, some CSS effect is very stubborn, often can not find out the solution, the network also has a lot of tools and experts to provide specific browser-compatible code, this page I will often tidy up in the future, Want to be able to help refactor and are looking for these effects of code, if you have a better implementation, you can tell me, or you can not solve, you may as well tell me. Do you want to find a browser-compatible notation? Point CSS Browser compatible with hack code (experience summary, keep up to date)

CSS Background color transparency (#ddd)

Please refer to the online version of the production

. Liter{filter:progid:dximagetransform.microsoft.gradient (enabled= ' true ', startcolorstr= ' #4CDDDDDD ', endColorstr=     ' #4CDDDDDD ');}:root. liter {filter:none; /* Handle Filter effect */background-color:rgba (221,221,221,0.3) in IE9 browser;}

Picture Vertical Center Alignment The first type: Table-cell method

<div class= "Test_box" ></div>

. test_box {display:table-cell;width:200px;height:200px;vertical-align:middle;text-align:center;*float:left;* font-family:simsun;*font-size:200px;*line-height:1;border:1px solid #000000;}. Test_box img {vertical-align:middle;}

The second type: Span method

<div class= "Test_box" ><span class= "Hook" ></span><a href= "http://blog.linxz.de/css_book/" target= "_blank" ></a></div>

. test_box {width:200px;height:200px;overflow:hidden;text-align:center;font-size:0;border:1px solid #000000;}. Test_box. hook {display:inline-block;width:0;height:100%;overflow:hidden;margin-left:-1px;font-size:0; Line-height:0;vertical-align:middle;}. Test_box img {vertical-align:middle;border:0 none;}

CSS border making small triangles (compatible with IE6)

Tool please refer to the online version of the blog

. triangle {display:inline-block;width:0;height:0;overflow:hidden;line-height:0;font-size:0;vertical-align: MIDDLE;BORDER-RIGHT:7PX solid #000fff; border-left:0 none;border-top:7px Solid transparent;border-bottom:7px Solid Transparent;_color: #FF3FFF; _filter:chroma (color= #FF3FFF);}

CSS fixed at the bottom

CSS code

 /*sticky Footer Solutionby Steve Hatcher http://stever.cahttp://www.cssstickyfooter.com*/* {margin:0;padding:0 ;}  /* Must declare 0 margins on everything, also for main layout components use padding, notvertical margins (top and bottom) To add spacing, else those margins get added to total Heightand your footer gets pushed down a bit more, creating Vertica L scroll bars in the browser */html, body {height:100%;} #wrap {min-height:100%;} #main {    overflow:auto;    padding-bottom:150px; /* Must be same height as the foot ER */} #footer {    position:relative;    margin-top: -150px;/* Negative value of footer he ight */    height:150px;    Clear:both;} /*opera Fix*/body:before {/* Thanks to Maleika (Kohoutec) */    content: "";    height:100 %;    float:left;    width:0;    margin-top:-32767px;/* Thank you Erik J -NEGate effect of float*/}/* Importantyou also need to include this conditional style in the  of your HTML file to feed This style to IE 6 and lower and 8 and higher.<!--[if! IE 7]><style type= "text/css" >    #wrap {display:table;height:100%}</style><! [endif]-->*/

HTML code

<div id= "wrap" ><div id= "main" ></div></div><div id= "Footer" ></div>

Pure CSS fixed at the bottom

#footer {   position:fixed;   left:0px;   bottom:0px;   height:32px;   width:100%;   Background: #333;} /* IE 6 */* html #footer {   position:absolute;   Top:expression ((0-(footer.offsetheight) + (document.documentElement.clientHeight? Document.documentElement.clientHeight:document.body.clientHeight) + (Ignoreme = Document.documentElement.scrollTop ? DOCUMENT.DOCUMENTELEMENT.SCROLLTOP:DOCUMENT.BODY.SCROLLTOP)) + ' px ');}

UseCSS wrapping URLs and text with very long content

This code fragment avoids long text beyond the content area by guaranteeing that the width of the wrapped element of the text adapts to the width of the content.

Pre {    white-space:pre;           /* CSS 2.0 */    white-space:pre-wrap;      /* CSS 2.1 */    White-space:pre-line;      /* CSS 3.0 *    /white-space:-pre-wrap;     /* Opera 4-6 *    /white-space:-o-pre-wrap;   /* Opera 7 *    /white-space:-moz-pre-wrap;/* Mozilla *    /white-space:-hp-pre-wrap;  /* HP Printers */    Word-wrap:break-word;      /* IE 5+ */}

UseCSS3 Create 3D text

The Text-shadow property can help you create 3D text only with CSS.

p.threed{    Text-shadow:        -1px 1px 0 #ddd,        -2px 2px 0 #c8c8c8,        -3px 3px 0 #ccc,        -4px 4px 0 #b8b8b8, c21/>-4px 4px 0 #bbb,        0px 1px 1px rgba (0,0,0,.4),        0px 2px 2px rgba (0,0,0,.3),        -1px 3px 3px rgba (0,0,0,.2), c25/>-1px 5px 5px Rgba (0,0,0,.1),        -2px 8px 8px rgba (0,0,0,.1),        -2px 13px 13px rgba (0,0,0,.1)        ;}

CSS Transparency

div{    opacity:./* STANDARD:FF GT 1.5, Opera, Safari *    /Filter:alpha (opacity=75);/* IE LT 8 */    -ms-filte R: "Alpha (opacity=75)"; /* IE 8 *    /-khtml-opacity:.///Safari 1.x *    /-moz-opacity:./* FF LT 1.5, Netscape */}

Change the color of the default selected text in your blog

:: Selection {    background: #ffb7b7;/* Safari */    color: #ffffff;}::-moz-selection {    background: #ffb7b7;/* Firefox *    /color: #ffffff;}

Multiple background images

#multiple-images {    background:url (image_1.png) top left no-repeat,    url (image_2.png) bottom left no-repeat,< C11/>url (image_3.png) bottom right no-repeat;}

Multi-column CSS3

Use CSS3 to create multiple columns, which can be adapted to Web pages, incompatible with IE

#columns-3 {   text-align:justify;   -moz-column-count:3;   -moz-column-gap:12px;   -moz-column-rule:1px solid #c4c8cc;   -webkit-column-count:3;   -webkit-column-gap:12px;   -webkit-column-rule:1px solid #c4c8cc;}

Text overflow omitted

. textoverflow a {    display:block;    width:120px;    margin:0px 0px 0px 3px;    White-space:nowrap;    Overflow:hidden;    Float:left;    -o-text-overflow:ellipsis;     /* for Opera */    text-overflow:ellipsis;        /* For IE */}.textoverflow:after{content: "...";} /* for Firefox */@media All and (min-width:0px) {. textoverflow:after{content: "";} /* for Opera */}

Let IE9 the following version support HTML5

Add the following JS code to the project

HTML5 shivif (!+[1,]) {    (function () {    var tags = [        ' article ', ' aside ', ' details ', ' figcaption ',        ' F Igure ', ' footer ', ' header ', ' Hgroup ',        ' menu ', ' nav ', ' section ', ' Summary ',        ' time ', ' mark ', ' Audio ', ' video ',        i = 0, len = tags.length;    for (; i < Len; i++) document.createelement (Tags[i]);    }) ();} Or

<!--[if LT IE 9]><script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script><! [endif]-->

PNG32 Transparent (IE6)

Mainly used for compatibility with IE6, not recommended, because this CSS code is more memory consuming.

. some_element {    background:url (image.png);    _background:none;    _filter:progid:dximagetransform.microsoft.alphaimageloader (src= ' image.png ', sizingmethod= ' crop ');}

Reference articles

http://miyuki.42code.com/2012/02/useful-css-snippets/

http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/

Original link: CSS commonly used code Daquan All rights reserved, please specify the source, offenders must investigate.
Annotated source format: front-end Development blog (http://caibaojian.com/popular-css-snippets.html) CSS hack code and browse compatibility summary

About CSS hack things can be as little as possible. Found this article I write too complex, so re-streamlined, paste the code into the Jsfiddle, the aspect of modifying code and maintenance.

1, ie conditional annotation method, Microsoft official recommended hack way.

Effective only under IE <!--[if ie]> this text is only displayed on IE browser <! [endif]--> only takes effect under IE6 <!--[if IE 6]> this text is displayed only on IE6 browser <! [endif]--> only valid at IE6 or above <!--[if GT ie 6]> this text only appears on IE6 above version of IE browser <! [endif]--> is not effective on IE7 <!--[if! IE 7]> This text is displayed on a non-IE7 browser <! [endif]--> non-IE browser effective <!--[if! ie]><!--> This text is only displayed on non-IE browsers <!--<! [endif]-->

2. Combine common CSS hack code

3.IE CSS Media, from here 3.IE CSS Media, from here

4.button Reset CSS style compatible IE6,IE7

button in IE6, IE7 under the compatibility, need to recharge CSS overflow:visible for

5. Let IE6 support Max-width,min-width

. sector{max-width:500px; _width:expression ((documentelement.clientwidth>500)? " 500px ":" Auto "); min-width:300px; _width:expression ((documentelement.clientwidth<300)? " 300px ":" Auto ");}

6.ie6 under certain circumstances line-height invalid

When the text in a container is connected to an IMG, input, textarea, select, object and other elements, the Line-height value set on the container will be invalidated and the row height of the above element may X2.
Affected browsers: Microsoft Internet Explorer 5.01/windows Microsoft Internet Explorer 5.5/windows Microsoft Internet Explorer 6

Workaround:
An IMG, input, textarea, select, object, and other elements that are connected to text are attributes:
{margin: (belongs to line-height-itself img,input,select,object height)/2px 0;vertical-align:middle;}

The original link: CSS hack code and browse compatibility summary copyright, reprint, please indicate the source, offenders must investigate.
Annotated source format: front-end Development blog (http://caibaojian.com/css-hacks.html)

CSS common code Daquan and CSS compatibility (reprint)