css常用代码大全以及css兼容（转载）

2023-08-16 18:20:40

css常见的快捷开发代码汇总（长期更新），包括CSS3代码，有一些css效果很顽固，经常会一时找不出解决方案，网络上也有很多的工具和高手提供了具体的浏览器兼容代码，这个页面我今后会经常整理，希望能够帮到重构和正在找这些效果的代码，如果你有更好的实现方案，不妨告诉我，或者你有解决不了的，也不妨告诉我。你想找浏览器兼容写法吗？点CSS浏览器兼容与hack代码（经验汇总，保持最新）

Css背景颜色透明（#ddd）

请参考在线版制作

.liter{

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4CDDDDDD', endColorstr='#4CDDDDDD');

}

:root .liter {

filter:none;     /*处理IE9浏览器中的滤镜效果*/

background-color:rgba(221,221,221,0.3);

}

图片垂直居中对齐

第一种：table-cell法

<div class="test_box">

	<img src="book.jpg" alt="css常用代码大全" alt="" />

</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;}

第二种：span法

<div class="test_box">

	<span class="hook"></span>

	<a href="http://blog.linxz.de/css_book/" target="_blank"><img src="book.jpg" alt="css常用代码大全" alt="" /></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制作小三角（兼容IE6）

工具请参考小志的在线版

.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固定在底部

CSS代码

 /*

Sticky Footer Solution

by Steve Hatcher 

http://stever.ca

http://www.cssstickyfooter.com

*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not

vertical margins (top and bottom) to add spacing, else those margins get added to total height

and your footer gets pushed down a bit more, creating vertical 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 footer */

}

#footer {

    position: relative;

    margin-top: -150px; /* negative value of footer height */

    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*/

}

/* IMPORTANT

You 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代码

<div id="wrap">

	<div id="main">

	</div>

</div>

<div id="footer">

</div>

纯粹的css固定在底部

#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');

}

用CSS包裹内容很长的URL和文本

这个代码片段通过保证文本的包裹元素宽度适应内容的宽度，能够避免很长的文本超出内容区域。

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+ */

}

用css3创造3D文字

text-shadow属性能帮助你只用CSS创造3D文字。

p.threeD{

    text-shadow:

        -1px 1px 0 #ddd,

        -2px 2px 0 #c8c8c8,

        -3px 3px 0 #ccc,

        -4px 4px 0 #b8b8b8,

        -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),

        -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透明度

div{

    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */

    filter: alpha(opacity=75); /* IE lt 8 */

    -ms-filter: "alpha(opacity=75)"; /* IE 8 */

    -khtml-opacity: .75; /* Safari 1.x */

    -moz-opacity: .75; /* FF lt 1.5, Netscape */

}

改变博客中默认选中文本的颜色

::selection {

    background: #ffb7b7; /* Safari */

    color: #ffffff;

}

::-moz-selection {

    background: #ffb7b7; /* Firefox */

    color: #ffffff;

}

多重背景图片

#multiple-images {

    background: url(image_1.png) top left no-repeat,

    url(image_2.png) bottom left no-repeat,

    url(image_3.png) bottom right no-repeat;

}

多栏CSS3

使用css3来创建多栏，它可以自适应网页，不兼容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;

}

文本溢出省略

.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 */ }

让IE9以下的版本支持HTML5

在项目中加入以下JS代码

// html5 shiv

if (!+[1,]) {

    (function() {

    var tags = [

        'article', 'aside', 'details', 'figcaption',

        'figure', '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透明（IE6）

主要用来兼容IE6，不建议使用，由于这个css代码比较耗内存。

.some_element {

    background: url(image.png);

    _background: none;

    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');

}

参考文章

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

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

CSS Hack代码与浏览兼容总结

关于CSS Hack的东西能少尽量少吧。发现这篇文章我写得太复杂了，所以重新精简了一下，把代码粘贴到jsfiddle上，方面修改代码和维护。

1, IE条件注释法，微软官方推荐的hack方式。

只在IE下生效

<!--[if IE]>

这段文字只在IE浏览器上显示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

这段文字只在IE6浏览器上显示

<![endif]-->

只在IE6以上版本生效

<!--[if gt IE 6]>

这段文字只在IE6以上版本IE浏览器上显示

<![endif]-->

只在IE7上不生效

<!--[if ! IE 7]>

这段文字在非IE7浏览器上显示

<![endif]-->

非IE浏览器生效

<!--[if !IE]><!-->

这段文字只在非IE浏览器上显示

<!--<![endif]-->

2.综合一下常用的CSS Hack代码

3.IE CSS Media，来自这里 3.IE CSS Media，来自这里

4.button重置css样式兼容ie6,ie7

button在IE6、IE7下的兼容性，需要充值css为overflow:visible

5.让IE6支持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下某些情况line-height无效

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；同时以上元素的行高可能×2。
受影响的浏览器： Microsoft Internet Explorer 5.01 / Windows Microsoft Internet Explorer 5.5 / Windows Microsoft Internet Explorer 6

解决办法：
对和文字相连接的img、input、textarea、select、object等元素加以属性：
{margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;}

码农公寓