标签归档:css hack

CSS制作小箭头

在西门大哥的博客中看到一篇文章:CSS实用小技巧,利用border属性实现一个标签做箭头,西门使用的是border,这里jucelin介绍另一种方法,用到的是一个特殊字符:◆。

演示DEMO

代码:请狂击DEMO,然后右键,查看源代码(写得应该还算规范)。

主要用途:制作tips等。

实现原理:方法很简单,特殊字符◆就已经有了箭头的效果,那么用2个◆,用相对或绝对定位将他们完全重合,如果想做成向上的箭头,则再将下一层的◆向上移动1px。设置下颜色:下一层的使用的是下面内容部分的边框色,而上一层的◆使用的是内容部分的背景色,这样就出现一个想要的样式。

兼容性:用的position定位,兼容性你懂的(DEMO中未测试,用于生产需自测)。

比较下

西门大哥的方法并不好实现border同一色的问题,当然如果使用上面的方法也是可以实现的。

最后说明

如果一个页面中用了很多tips箭头,我仍然建议使用图片,减少浏览器的渲染时间,当然似乎要很多很多,才能看出浏览器有卡的效果。

相关资源

另一种实现小箭头的方法:CSS实用小技巧,利用border属性实现一个标签做箭头

jquery.bgiframe使用方法

jquery.bgiframe是用来处理IE6下select的z-index最高无法被透明层遮罩的BUG,原理也是利用IE6下的BUG,iframe可以遮罩住select,而DIV可以遮罩iframe,这样DIV也就遮罩住了select。

网上转载这个插件的文章很多,但大多都是复制过来的,来基本的错别字都没有修改。jucelin看到这个插件时就下载到了JS代码,但不知道初始化时对谁操作,于是网络中找了一会,很是失望的是,没有找到,也许是我找到的太匆忙。最后还是下载的官方包(在明河的博客上下载的),演示有,但代码中连jQuery地址错了,八成不是官方的演示代码。

OK,不发牢骚了。

插件官网及介绍原地址  https://github.com/brandonaaron/bgiframe

下载地址太长,点这里  ||  网盘下载 (都为2.1.3-pre版本)

官方演示http://sandbox.runjs.cn/show/dooztchz(下载地址中的test.html)

使用方法:

<!--[if lte IE 6]>

<script type="text/javascript" src="Js/jquery.bgiframe.min.js"></script>

<script language="javascript">

$(document).ready(function(){

$("#bg").bgiframe();//#bg是遮罩层,即设置半透明的那个DIV,其他都没用

});

</script>

<![endif]-->

使用后

jucelin在使用后,因为设置position的问题,导致遮罩层打开后select不可见,关闭时可见,这个也没去深究。另外,有网友说此插件也有BUG,详情可看这里:bgiframe的bug

2012.8.22更新

看很多朋友都有在搜索这个插件,我给下我最后的解决方法,方法很简单,在有遮罩层打开的时候将后面的select的visibility设置为hidden,关闭时可见,一般而言,我们可以专门设置IE6下的JS来设置。因为我没有使用这个插件,所以没有深入探究上面的BUG。

如果你有好的方法也可以留言。

2012.11.29更新

将官方的演示文档放在了runjs.cn上,供大家直接测试使用。演示地址:http://sandbox.runjs.cn/show/dooztchz,源码地址:http://runjs.cn/code/dooztchz

jQuery插件初识:Title提示插件jTipsShow

jQuery插件多如牛毛,jQuery的高手也是随处可见,作为目前主流javascript框架,jQuery已经是无孔不入。咱也跟上时髦,做点特效,自己观赏观赏,并作为以后参考。高手有时间帮忙指导指导,先谢过。

一、写在前面的话:

jucelin也是初学者,写这么个小插件用了一个上午的时间,真是会者不难,难者不会。虽说Title提示类插件已经有很多高手写出来了,如张鑫旭的jQuery万能浮动框插件,功能很强大,但就是有些代码还看不懂,所以自己用最简单的方法,自己学习写了个。

再者工作中经常要用到使用表格来显示数据,但苦于界面宽度及页面美观的限制,一些内容只能显示部分,显示全部则用title来显示,可惜的是IE的一个怪毛病,鼠标放上去之后一段时间后显示,显示一段时间后就会消失,如果内容较多,使用者准备仔细阅读时,显示的title就消失了。鉴此需求,写个脚本,应该还算值,原本用在单页面的,在对jQuery插件的好奇心下,就封装成一个插件。

二、jQuery插件的基础知识

jQuery为开发插件提拱了两个方法,分别是jQuery自身类的拓展和给jQuery对象添加方法。

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法

//插件定义
(function($) {
	$.extend({
		trim: function(obj) {
			return (obj + ' trim');
		}
	})
})(jQuery);

//调用
alert($.trim('aa'));

2.jQuery.fn.extend(object);给jQuery对象添加方法

//插件定义

(function($) {

$.fn.alertWhileClick = function() {

$(this).click(function (){

alert($(this).val() + "2");

});

}

})(jQuery); //页面上为:<input id="input1" type="button" value="test"/>

//调用

$('#input1').alertWhileClick();

三、上代码

请直接访问这里:jQuery-tipsShow

四、插件使用方法

1.先引入jQuery,在引入jTipsShow

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery-tipsshow.js"></script>

2.调用插件

<script language="javascript">

$(document).ready(function(){

//span-title,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'title'

});

//span-rel,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'rel'

});

//td=title,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'td',

tipsTitle: 'title'

});

});

</script>

3.初始化参数说明

titleValue: '',//title的默认值,这个基本上没什么用,初始化了也会被替换掉,添加在插件中主要是全局使用

tipsTag: 'span',//需要显示内容的容器

tipsTitle: 'title',//显示框中要显示的内容

delaytime:500//延时,特效用的

另外被查找的容器tipcontain会被定义成position:relative,所以需要注意样式。

五、总结下

原本参考着别人的插件写的,没有查看jQuery插件的基础知识,导致两种方法弄混了,怎么调试都出错,不会走,就想跑了,呵呵,惭愧下。这个插件还是可以继续拓展的,而且效率方面可能也不是最优的,因为我还没学习到这块的内容,以后再看看能不能优化,也希望你能停下脚步,帮俺看看。

下载插件JShttps://jucelin.com/wp-content/uploads/2012/01/jQuery-tipsShow1.js

在线演示文档:https://jucelin.com/wp-content/uploads/2012/01/jTipsShow.html

六、参考资料:

jQuery插件开发:http://www.zhuoda.org/irini/112855.html

jQuery插件开发全解析:http://www.iteye.com/topic/545971

jquery插件开发范例—A Plugin Development Pattern:http://www.iteye.com/topic/349020

更多参考资料请google:http://www.google.com

CSS换行的那些事

CSS网页布局中,常常会遇到这样的问题,强制文字换行,而不是在一行内显示撑开容器影响布局。而有些时候可能会强制内容不换行,多出的

部分隐藏掉即可,关于强制不换行与强制换行的一些CSS属性52CSS.com作一些整理,希望能给大家的工作和学习提供参考。

先了解以下几个属性:

强制不换行

p.xx {

white-space:nowrap;

}

自动换行

p.xx {

word-wrap: break-word;

word-break: normal;

}

强制英文单词断行

p.xx {

word-break:break-all;

}

CSS设置不换行:

overflow:hidden 溢出隐藏

white-space:nowrap 不换行

pre 换行和其他空白字符都将受到保护

nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象

CSS设置强制换行:

word-break:break-all 强制断开实现转行

normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all 。

几个重要属性的补充阅读:

white-space:http://www.52css.com/css/c_whitespace.html

word-wrap:http://www.52css.com/css/c_wordwrap.html

word-break:http://www.52css.com/css/c_wordbreak.html

overflow:http://www.52css.com/css/c_overflow.html

欢迎大家补充,52css.com提供了更多实例供大家参考。

原文摘自52css.com,原文地址:http://www.52css.com/article.asp?id=767

IE BUG:内联的图片超链接失效

BUG描述下先:在标签<a>下加入<span>和<img>标签,并将<a>和<span>标签定义为display:block,设定大小,测试发现鼠标放在图片是不会显示手型,图片的链接也“失效”了(其实未失效,下面解释),点击没有任何效果,但点击<a>标签的空白位置,链接依然有效。

适用平台

IE6-8下出现,IE9未测试,Chrome正常。

BUG重现

下面是专门写的一个测试页面,有兴趣的可以测试下。

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>IE BUG:内联的图片超链接失效 - Design by jucelin.com</title>

<style>

.test-a{display:block; width:100px; height:100px; background:#eee;}

.test-a .test-img{display:block; width:50px; height:50px; background:yellow;}

.test-a .test-title{display:block;}

</style>

</head><body>

<div>

<a href="https://jucelin.com" target="_blank">

<span><img src="Images/form.png" border="0" /></span>

<span>jucelin.com</span>

</a>

</div>

<div>

<a href="https://jucelin.com" target="_blank" class="test-a">

<span class="test-img"><img src="Images/form.png" border="0" /></span>

</a>

</div>

</body></html>

下面是测试的截图(图片丢失):

图中的鼠标应该是正常的鼠标,单截图没办法截下鼠标的样式,就随便找了个样式演示下。

从测试可以看出来,图片的链接实际上仍然存在的,鼠标放上去之后在IE的状态栏中显示了链接的地址,但单击时,则链接无法相应。jucelin也解释不了这其中的原因,只能记下来自己以后注意下。

解决办法

BUG 就找个Hack的方法补补,将img所在的span添加position:relative; z-index:-1;样式,就是将span的层级放到a的下方,此时的要求是a不能有背景色,否则img就看不到了。另外使用JS也可以很好的解决。

相关文档

IE6,7中, 图片导致超链接失效的bug:http://blog.163.com/thinker_creator/blog/static/101933149200941994831531/

高效 CSS 指南

避免通用类

确保选择器不是以通用类结束。

不要用标签名或class来描述ID类

如果你有一个选择器是以ID类作为关键选择符,请不要添加多余标签名上去。因为ID是唯一的,你不要为了一个不存在的理由而降低了匹配的效率。

差 – button#backButton { }
差 – .menu-left#newMenuIcon { }
好 – #backButton { }
好 – #newMenuIcon { }

不要用标签名来描述 class 类

和上一条类似,所有的 class 也是唯一的。你应该把标签名包含在 class 名中。

差 – treecell.indented { }
好 – .treecell-indented { }

尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素,我们可以将类别进行再细分为 class 类,这样就不用为了一个标签浪费时间去匹配过多的选择符了。

差 – treeitem[mailfolder="true"] > treerow > treecell { }
好 – .treecell-mailfolder { }

避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源,尤其是在选择器使用标签类或通用类的时候。很多情况中,我们真正想要的是子选择符。除非有明确说明,在 UI CSS 中是严禁使用子孙选择符的。

差 – treehead treerow treecell { }
好一点,但还是不行(参照下一条) – treehead > treerow > treecell { }

标签类中不要包含子选择符

不要在标签类中使用子选择符。否则,每次元素的出现,都会额外地增加匹配时间。(特别是当选择器似乎多半会被匹配的情况下)

差 – treehead > treerow > treecell { }
最好 – .treecell-header { }

留意所有子选择符的使用

小心地使用子选择符。如果你能想出一个的不使用他的方法,那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符,像这样。

差 – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

请记住 RDF 的属性是可以在模板中被复制的!利用这一点,我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。

好 – .tree-folderpane-icon[IsImapServer="true"] { }

运用继承

理解哪个属性会继承,并允许他们这么做!我们已经清楚地建立了 XUL widgetry(?) ,所以你可以把 list-style-image 或 font 属性设置在父标签上,然后他会渗透到匿名内容里。这样,你就不需要浪费时间在匿名内容上直接写声明了。

差 – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
好 – #bookmarkMenuItem { list-style-image: url(blah); }

在上面的例子中,定义匿名内容样式的需求(不用去搞明白 list-style-image 是如何继承的)导致需要一个 class 类的选择器,而这条规则实际上更应该以最唯一的 ID 类结尾。
请记住,特别是在匿名内容中,他们都拥有相同的 class 。上面那条不好的选择器写法导致每个菜单的图标都会被检查是否包含在收藏夹菜单栏目中。这是非常耗资源的(因为有很多菜单);这个选择器应该不要被收藏夹以外的菜单检查。

使用 -moz-image-region

把很多图片组合在一张图片里,然后用 -moz-image-region 来选择他们,会比每张图片分开存储,执行效率上高很多。

原文转自css88:http://www.css88.com/archives/402

[转]CSS常用的hack技巧

在iteye上看到一篇介绍CSS常用的Hack的技巧,转过来自己Mark下。

color:red; /* 所有浏览器都支持 */
 color:red !important;/* 除IE6外 */
 _color:red; /* IE6支持 */
 *color:red; /* IE6、IE7支持 */
 +color:red;/*IE7支持*/
 *+color:red; /* IE7支持 */
 color:red\9; /* IE6、IE7、IE8、IE9支持 */
 color:red\0; /* IE8、IE9支持 */
 color:red\9\0;/*IE9支持*/

/* webkit and opera */
 @media all and (min-width: 0px){ div{color:red;} }

/* webkit */
 @media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }

/* opera */
 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-

ratio:0) { div{color:red;} }

/* firefox * /
 @-moz-document url-prefix(){ div{color:red;}} /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest firefox */
 }

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

其他还有使用注释的方式对IE进行判断的方法也应该算是Hack的方法,这个可以参考前面的一篇文章:html+css判断各个IE浏览器版本

html+css判断各个IE浏览器版本

在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了。

HTML代码中,区别各种浏览器的代码如下(以ie6为例,这时目前国内用户最多的,得益于盗版xp系统的广泛流传….不过这玩意也是绝大部分兼容性问题的根源,因为其标准化程度实在是….):

<!--[if IE 6]> 仅IE6可识别 <![endif]-->

<!--[if lte IE 6]> IE6及其以下版本可识别 <![endif]-->

<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->

<!--[if gte IE 6]> IE6及其以上版本可识别 <![endif]-->

<!--[if gt IE 6]> IE6以上版本可识别 <![endif]-->

<!--[if IE]> 所有的IE可识别 <![endif]-->

lte:就是Less than or equal to的简写,也就是小于或等于的意思。

lt :就是Less than的简写,也就是小于的意思。

gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

gt :就是Greater than的简写,也就是大于的意思。

! :就是不等于的意思,跟javascript里的不等于判断符相同

以上这些代码写法都是针对ie各版本浏览器的,在其他浏览器中这些代码都会被解释为Html注释而直接无视掉,所以要想些针对firefox之类的非ie浏览器,需要这么写:

<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>

—————————————————————————————————————————————

CSS代码中,则可以根据各浏览器自己独立的可识别的特殊代码来编写区分浏览器的代码,例如为IE系列浏览器可读[\9],而IE6和IE7可读[*],另外IE6可辨识[ _ ](下划线);由于CSS读取时是按从上到下来的,同样属性靠后写的生效,因此可以依照顺序写下来,就会让每个浏览器正确的读取到自己看得懂得CSS语法,有效区分各类型或版本:

.classname{

background:blue; /*Firefox等非IE浏览器背景变蓝色*/

background:red \9; /*IE8 背景变红色*/

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

类似的还有:

.classname {

background:black !important; /*非IE6 背景变黑色*/

background:orange; /*IE6 背景变橘色*/

}

解释下!important属性:!important意思是将该css样式提权,优先级别加高,而只有IE6以上版本才支持这个属性,所有可以用来区别IE6与其他版本的IE。