今天在做一个Timeline的模块的时候遇到一个棘手的问题： 给元素添加display:inline-block 属性的时候会产生额外的4px的margin-right。

原始代码

页面渲染结果：

每一列都会向右产生外边距4px，苦思不得其解，尝试负的外边距，但是涉及到其他的问题:每个li标签会重叠1-2个px，妨碍到鼠标hover状态的事件。尝试修改doctype类型也不见效果。后来尝试了另外一个方法：

把原来的HTML 代码结构：

更改为：

这样就不会产生额外的外边距，也弄不清楚为什么会出现这种问题。先暂时记下，以后再研究研究。

今天做项目的时候遇到一个变态的问题，CKEditor 嵌入ROR 的时候出现了 一个回车产生2个br 标签的问题(2个回车产生4个br……)，使段落之前的间距变大一倍。
CKeditor本身应该没有问题，为解决此问题，想了一个笨方法： 用JS的nextSibling 属性来查找是否有相邻的2个或者以上的br，有的话直接remove。 (用的是jQuery)。
初始代码：

发现只取到部分的br，查资料发现，firefox、opera、safari会把诸如空格换行之类的排版元素视作节点读取，所以在这些浏览器下只读取了部分br。

改进的代码：

这样就圆满解决了 空格（或者多个）、回车等产生的问题。

div自适应高度

方法1：______________________________
_zoom:1;
overflow:auto;
*overflow:visible;

方法2：______________________________________

Min-height是个很有用的属性，但并非所有浏览器都兼容的，当然主要问题出在IE6，这个不支持标准的浏览器偏偏占据很大的市场份额，实在让设计师无奈。好在IE6对于overflow的特殊实现，又给我们实现Min-height提供了一个思路，所以产生了以下兼容各个主流浏览器的Min -height写法：

min-height:100px;
height:auto !important;
height:100px;
overflow:auto;

通过IE6，IE7，FireFox2.0，Opera9.10，Safari3.03(For Win)检测。

———————————————–

css hack

区别IE6与FF：
background:orange;*background:blue;

区别IE6与IE7：
background:green !important;background:blue;

区别IE7与FF：
background:orange; *background:green;

区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

IE6     IE7      FF
*                  √          √         ×
!important   ×          √         √

——————————————————————————–
另外再补充一个，下划线”_”,
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

CSS 文字截取 省略号替代

display:block;
width:310px;
white-space:nowrap;
overflow:hidden;
float:left;
-o-text-overflow: ellipsis;    /* for Opera */
text-overflow:ellipsis;        /* for IE */
}
div:after{content:”…”;padding-left:3px;font-size:12px;}  /* for Firefox */

用css来实现自动截取文字，不需要后台程序和JS的使用
好处是：有利于内容完整性，有利于SEO，无需后台程序处理，可以在前台随时调节要截取的长度。
不好的地方：不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。
另外在设置截取宽度的时候，要注意，尽量让文字截取完整

容器垂直居中

@如果高度不固定的话 直接padding:20px; 就可以了

@如果是高度高度的话  vertical-align属性只会对拥有valign特性的(X)HTML标签起作用)

在CSS中有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}

不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的
解决方案：

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

<div id=”wrap”>
<div id=”subwrap”>
<div id=”content”>
</div>
</div>
</div>
如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中

完美的解决方案：
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}