一个全栈攻城狮的纯技术干货分享 ~
搜索到
3
篇与
的结果
-
纯 CSS 带方向箭头消息提示框 这是一个纯CSS写的带方向箭头的消息提示框，支持左上、右上、左下、右下、纯左、纯右五种方向箭头，对应的Class分别为 ark-poptip-arrow-a/b/c/d/e/f ，效果图如下：CSS部分.ark-poptip{ position: absolute; color: #db7c22; z-index: 101; line-height: 1.5; zoom: 1; } .ark-poptip-shadow{ background-color: rgba(229,169,107,0.15); FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#26e5a96b,endColorstr=#26e5a96b); border-radius: 2px; padding: 2px; zoom: 1; _display: inline; } .ark-poptip-container{ position: relative; background-color: #fffcef; border: 1px solid #ffbb76; border-radius: 2px; padding: 5px 22px 5px 10px; zoom: 1; _display: inline; } .ark-poptip:after,.ark-poptip-shadow:after,.ark-poptip-container:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .ark-poptip a.ark-poptip-close{ position: absolute; right: 3px; top: 3px; border: 1px solid #ffc891; text-decoration: none; border-radius: 3px; width: 12px; height: 12px; font-family: tahoma; color: #dd7e00; line-height: 10px; line-height: 10px\0; *line-height: 12px; text-align: center; font-size: 14px; background: #ffd7af; background: -webkit-gradient(linear,left top,left bottom,from(#fff0e1),to(#ffe7cd)); background: -moz-linear-gradient(top,#fff0e1,#ffe7cd); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF0E1',endColorstr='#FFE7CD'); background: -o-linear-gradient(top,#fff0e1,#ffe7cd); background: linear-gradient(top,#fff0e1,#ffe7cd); overflow: hidden; } .ark-poptip a.ark-poptip-close:hover{ border: 1px solid #ffb24c; text-decoration: none; color: #dd7e00; background: #ffd7af; background: -webkit-gradient(linear,left top,left bottom,from(#ffe5ca),to(#ffcc98)); background: -moz-linear-gradient(top,#ffe5ca,#ffcc98); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE5CA',endColorstr='#FFCC98'); background: -o-linear-gradient(top,#ffe5ca,#ffcc98); background: linear-gradient(top,#ffe5ca,#ffcc98); } .ark-poptip-arrow,.ark-poptip-arrow em,.ark-poptip-arrow span{ position: absolute; font-size: 14px; font-family: SimSun,Hiragino Sans GB; font-style: normal; line-height: 21px; z-index: 10; *zoom: 1; } .ark-poptip-arrow em{ color: #ffbb76; } .ark-poptip-arrow span{ color: #fffcef; top: 0; left: 0; } .ark-poptip-arrow-a{ left: 14px; top: -10px; top: -9px\0; } .ark-poptip-arrow-a em{ top: -1px; left: 0; } .ark-poptip-arrow-b{ right: 28px; top: -10px; top: -9px\0; } .ark-poptip-arrow-b em{ top: -1px; left: 0; } .ark-poptip-arrow-c{ left: 14px; bottom: 10px; } .ark-poptip-arrow-c em{ top: 1px; left: 0; } .ark-poptip-arrow-d{ right: 28px; bottom: 10px; } .ark-poptip-arrow-d em{ top: 1px; left: 0; } .ark-poptip-arrow-e{ top: 6px; left: -6px; } .ark-poptip-arrow-e em{ top: 0; left: -1px; } .ark-poptip-arrow-f{ top: 6px; right: 7px; } .ark-poptip-arrow-f em { top: 0; left: 1px; } .ark-poptip-content{ float: none; display: inline; *zoom: 1; } .ark-poptip-content:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } :root .ark-poptip-shadow{ FILTER: none\9; }HTM部分<div class="ark-poptip" style="top: 10px;"> <div class="ark-poptip-shadow"> <div class="ark-poptip-container"> <div class="ark-poptip-arrow ark-poptip-arrow-a"> *◆*<span>◆</span> </div> <div class="ark-poptip-content">欢迎访问技术写真 の 若海 & 尐岢 http://www.rehiy.com</div> </div> </div> </div>源码下载css-tips -
CSS Hack (ie6-9,firefox,chrome,opera,safari) 及 兼容一览表 CSS hack 是指我们为了兼容各浏览器，而使用的特别的css定义技巧。#test { width:300px; height:300px; background-color:blue; /*firefox*/ background-color:red\9; /*all ie*/ background-color:yellow\0; /*ie8*/ +background-color:pink; /*ie7*/ _background-color:orange; /*ie6*/ } :root #test { background-color:purple\9; } /*ie9*/ @media all and (min-width:0px) { #test {background-color:black\0;} } /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0) { #test {background-color:gray;} } /*chrome and safari*/分析上面的代码：background-color:blue; 各个浏览器都认识，这里给firefox用；background-color:red\9; \9 所有的ie浏览器可识别；background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，不过后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；+background-color:pink; + ie7定了；_background-color:orange; _ 专门留给神奇的ie6；:root #test { background-color:purple\9; } :root 是给ie9的，:root 选择符 {属性\9;}@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } 最后这个是浏览器新贵chrome和safari的。兼容一览表:
-
让 IE6-7 兼容 CSS 的 inline-block 在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然是行布局。IE8识别display:inline-block;在IE6、IE7中实现块元素的inline-block效果有以下两种方法：1.先使用display:inline-block属性触发layout，然后再定义display:inline让块元素呈现内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典BUG)。2.直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。<html> <head> <style type="text/css"> .box{width:100px;height:100px;border:1px solid #FF7900;margin:8px;} .ib1{display:inline-block;} .ib1{*display:inline;} .ib2{display:inline-block;*display:inline;*zoom:1;} </style> </head> <body> <div class="box ib1">1</div><div class="box ib1">2</div> <div class="box ib2">3</div><div class="box ib2">4</div> </body> </html>
