常用文字处理技巧
From: http://blog.webrule.net/
1、隐藏文字显示:
当一个超链接是用图片来代替(比如logo、按钮、导航条菜单等),又要兼顾SEO和图片无法显示的时候,可以先把A标签的文字隐藏掉,用背景图片表示。
如上代码所示,让文字负缩进999像素,为了防止溢出,强制让文字在同一行显示(不折行),并且超出部分隐藏。
button按钮标签无法用这种方式隐藏value值(按钮上显示的文字),我们可以把文字大小和行高都设成0像素来隐藏它们
2、一行不够用省略号表示:
一般在一个文章列表里,都是一行一个标题,点标题后链接到对应的文章页面,但是难免有超长标题的文章,尤其是对于侧边栏的列表更容易放不下太多字的标题。我们可以用CSS来简单地控制一下并且把超长部分用省略号表示(IE6不支持)。
如上代码所示,因为此代码对多行无效,所以先强制让文字在同一行显示(不折行),让溢出部分隐藏,最后加个文字隐藏的样式。IE6不支持【text-overflow:ellipsis】的属性,超出部分只隐藏没有省略号。
注意:这段CSS属性不能继承到子标签,所以要在当前级别的元素上加这段属性,不可加到父级元素上,否则无效。
3、让文本两端对齐使段落更美观:
我们都知道1个全角中文字符占2个英文字符长度,所以在一篇文章中如果有中英文混排,那么一个段落难免会出现参差不齐的现象。为了让段落更整齐,我们可以在CSS中给文本添加个两端对齐的属性,这样不管每一行字符多少都可以显得很整齐。
如上代码所示,我们只需要给段落的CSS添加【text-align:justify】和【text-justify:distribute】2个属性即可,可能由于Webkit内核没有对全角字符进行支持,所以在Chrome和Safari中对中文段落没有作用。
本条目发布于 2013 年 2 月 9 日。属于 经验技巧 分类,被贴了 CSS、两端对齐、技巧、文字 标签。
<:article id=post-1 class="post-1 post type-post status-publish format-standard hentry category-experience tag-css tag-hack tag-10">
我总结的IE6/7/8、Firefox、Chrome的CSS Hack方法
刚接触CSS时,对于各个浏览器样式不统一的情况,每次都要看一遍Hack教程,慢慢熟悉后自己也有了一套可以任意区分各个浏览器的Hack方法。有些Hack教程提到利用!important,我个人不太喜欢用这个属性,由于不同浏览器不同版本的兼容度不一致,感觉不容易记下来。
我总结的CSS Hack方法是利用各浏览器对代码特殊属性值解析实现的,无法通过W3C验证。如果既想通过W3C验证,又想Hack,只能先判断每种浏览器的版本,然后分别读取不同的CSS文件,但是这样维护起来很麻烦。是为了追求通过W3C验证的虚荣心,还是为了维护方便,取舍就要看各位的想法了。
1、“\9”被所有IE识别(”\9″与属性值之间有无空格均可,加个空格可以更好识别),Firefox不识别,用来区分所有版本的IE与火狐。
2、“*”只被IE7/IE6识别,用来让IE7和IE6区分其它浏览器。
3、“_”只被IE6识别,用来让IE6区分其它浏览器。
4、“\0”只被IE8识别(“\0”与属性值之间不可有空格,否则无效),用来让IE8区分其它浏览器。
5、Firefox专属的Hack:
6、根据以上几种Hack方法,可以一次性区分IE6/IE7/IE8/Firefox。
其实只要看第6条就可以不变应万变了,但是为了可以灵活运用CSS Hack,还是建议大家熟悉前4条,第5条不是很常用,了解一下即可。
posted on 2013-03-19 13:04 canny_strive 阅读(229) 评论(0) 编辑 收藏 举报