常用文字处理技巧

1、隐藏文字显示：

当一个超链接是用图片来代替（比如logo、按钮、导航条菜单等），又要兼顾SEO和图片无法显示的时候，可以先把A标签的文字隐藏掉，用背景图片表示。

【CSS代码】
a {
  display:block;
  width:200px;
  height:100px;
  background:url(images/logo.gif) no-repeat;
  
  /* 核心代码： */
  text-indent:-999px;
  white-space:nowrap;
  overflow:hidden;
}

【CSS代码】

a {

display:block;

width:200px;

height:100px;

background:url(images/logo.gif)no-repeat;

/* 核心代码： */

text-indent:-999px;

white-space:nowrap;

overflow:hidden;

}

如上代码所示，让文字负缩进999像素，为了防止溢出，强制让文字在同一行显示（不折行），并且超出部分隐藏。

button按钮标签无法用这种方式隐藏value值（按钮上显示的文字），我们可以把文字大小和行高都设成0像素来隐藏它们

【CSS代码】
button {
  width:200px;
  height:100px;
  background:url(images/btn.gif) no-repeat;
  
  /* 核心代码： */
  font-size:0;
  line-height:0;
}

【CSS代码】

button {

width:200px;

height:100px;

background:url(images/btn.gif)no-repeat;

/* 核心代码： */

font-size:0;

line-height:0;

}

2、一行不够用省略号表示：

一般在一个文章列表里，都是一行一个标题，点标题后链接到对应的文章页面，但是难免有超长标题的文章，尤其是对于侧边栏的列表更容易放不下太多字的标题。我们可以用CSS来简单地控制一下并且把超长部分用省略号表示（IE6不支持）。

【CSS代码】
.list li {
  width:200px;
  
  /* 核心代码： */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

【CSS代码】

.list li {

width:200px;

/* 核心代码： */

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

如上代码所示，因为此代码对多行无效，所以先强制让文字在同一行显示（不折行），让溢出部分隐藏，最后加个文字隐藏的样式。IE6不支持【text-overflow:ellipsis】的属性，超出部分只隐藏没有省略号。

注意：这段CSS属性不能继承到子标签，所以要在当前级别的元素上加这段属性，不可加到父级元素上，否则无效。

3、让文本两端对齐使段落更美观：

我们都知道1个全角中文字符占2个英文字符长度，所以在一篇文章中如果有中英文混排，那么一个段落难免会出现参差不齐的现象。为了让段落更整齐，我们可以在CSS中给文本添加个两端对齐的属性，这样不管每一行字符多少都可以显得很整齐。

【CSS代码】
p {
  text-align:justify;
  text-justify:distribute;
}

【CSS代码】

p {

text-align:justify;

text-justify:distribute;

}

如上代码所示，我们只需要给段落的CSS添加【text-align:justify】和【text-justify:distribute】2个属性即可，可能由于Webkit内核没有对全角字符进行支持，所以在Chrome和Safari中对中文段落没有作用。

<: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与火狐。

【例】：
p {
  color:red; /* Firefox 是红色 */
  color:blue \9; /* IE6/IE7/IE8 是蓝色 */
}

【例】：

p {

color:red;/* Firefox 是红色 */

color:blue\9;/* IE6/IE7/IE8 是蓝色 */

}

2、“*”只被IE7/IE6识别，用来让IE7和IE6区分其它浏览器。

【例】：
p {
  color:red; /* IE8/Firefox 是红色 */
  *color:blue; /* IE6/IE7 是蓝色 */
}

【例】：

p {

color:red;/* IE8/Firefox 是红色 */

*color:blue;/* IE6/IE7 是蓝色 */

}

3、“_”只被IE6识别，用来让IE6区分其它浏览器。

【例】：
p {
  color:red; /* IE7/IE8/Firefox 是红色 */
  _color:blue; /* IE6 是蓝色 */
}

【例】：

p {

color:red;/* IE7/IE8/Firefox 是红色 */

_color:blue;/* IE6 是蓝色 */

}

4、“\0”只被IE8识别（“\0”与属性值之间不可有空格，否则无效），用来让IE8区分其它浏览器。

【例】：
p {
  color:red; /* IE6/IE7/Firefox 是红色 */
  color:blue\0; /* IE8 是蓝色 */
}

【例】：

p {

color:red;/* IE6/IE7/Firefox 是红色 */

color:blue\0;/* IE8 是蓝色 */

}

5、Firefox专属的Hack：

【格式】：
@-moz-document url-prefix() {
  CSS代码，可包含多个选择器。
}
【例】：
p {
  color:red; /* IE6/IE7/IE8 是红色 */
}
@-moz-document url-prefix() {
  p {
    color:blue;
  }
} /* Firefox 是蓝色 */

【格式】：

@-moz-document url-prefix() {

CSS代码，可包含多个选择器。

}

【例】：

p {

color:red;/* IE6/IE7/IE8 是红色 */

}

@-moz-document url-prefix() {

p {

color:blue;

}

}/* Firefox 是蓝色 */

6、根据以上几种Hack方法，可以一次性区分IE6/IE7/IE8/Firefox。

【例】：
p {
  color:red; /* Firefox 是红色 */
  color:blue \9; /* IE8 是蓝色 */
  *color:green; /* IE7 是绿色 */
  _color:yellow; /* IE6 是黄色 */
}

或者：
p {
  color:red; /* Firefox 是红色 */
  color:blue\0; /* IE8 是蓝色 */
  *color:green; /* IE7 是绿色 */
  _color:yellow; /* IE6 是黄色 */
}

【例】：

p {

color:red;/* Firefox 是红色 */

color:blue\9;/* IE8 是蓝色 */

*color:green;/* IE7 是绿色 */

_color:yellow;/* IE6 是黄色 */

}

或者：

p {

color:red;/* Firefox 是红色 */

color:blue\0;/* IE8 是蓝色 */

*color:green;/* IE7 是绿色 */

_color:yellow;/* IE6 是黄色 */

}

其实只要看第6条就可以不变应万变了，但是为了可以灵活运用CSS Hack，还是建议大家熟悉前4条，第5条不是很常用，了解一下即可。

canny_strive

我总结的IE6/7/8、Firefox、Chrome的CSS Hack方法

导航

公告