CSS浏览器宽容与hack代码(资历汇总

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="图片 1" />
</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">

    <a href="http://blog.linxz.de/css_book/" target="_blank"><img src="book.jpg" alt="图片 2" /></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打包内容很短的UGL450L和文书

以此代码片段通过有限支撑文本的卷入成分宽度适应内容的宽窄,能够幸免非常短的文件超出内容区域。

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

参照作品

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website