CSS样式

自动换行设定宽度：word-wrap\word-break\white-space:normal\width

 

---------------------------------------------------------------------------------------------------------------

span,a行级元素高度设置：加上display:inline-block 成为块级元素，与div有所区别，它表示作为一个小块独立使用，这些标签在不设置其他样式的情况下既能保持原状，又能附加DIV的块状功能，其好处是它的宽度不是DIV默认的自动宽度，而是自身的宽度，同样，高度，宽度，外边，内边都能设置，并且能同时紧邻标签，而不必使用float。

 

---------------------------------------------------------------------------------------------------------------

text-overflow: ellipsis属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

firefox:overflow:auto 时加上white-space:nowrap

 

---------------------------------------------------------------------------------------------------------------

css hack:

FROM:http://www.cnblogs.com/huangjianhuakarl/archive/2009/07/22/1528744.html

 

"_"　IE6可以识别"_",IE7、IE8、FireFox不能.

"\9"　例:"border:1px \9;".这里的"\9"可以区别  所有IE和FireFox.

"\0"　IE8识别，IE6、IE7不能.

 

!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与 IE7与其他浏览器

 

IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等
书写顺序，一般是将识别能力强的浏览器的CSS写在后面

 

1：!important
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与IE7与其他浏览器
.browserTest
{
    border:20px solid #60A179 !important;
    border:20px solid #00F;
}
在Mozilla中或者IE7浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：
在IE6中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：

2：*
IE都能识别*；标准浏览器(如火狐)不能识别*
区别IE6与火狐
.browserTest
{
    border:20px solid #60A179;
    *border:20px solid #00F;
}
区别IE7与火狐
.browserTest
{
   border:20px solid #60A179;
   *border:20px solid #00F;
}
区别IE7，IE6与火狐
.browserTest
{
   border:20px solid #60A179;
   *border:20px solid #00F !important;
   *border:20px solid ###;
}

3：_
IE6支持下划线，IE7和firefox均不支持下划线
区别IE7，IE6与火狐
.browserTest
{
   border:20px solid #60A179;
   *border:20px solid #00F;
   _border:20px solid ###;
}
/*不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面*/

..........