Illustration
Robert Carter | Cracked Hat Illustration
原文地址： http://www.behance.net/gallery/Robert-Carter–Cracked-Hat-Illustration/175815
display:inline-block 额外产生的4px margin
今天在做一个Timeline的模块的时候遇到一个棘手的问题： 给元素添加display:inline-block 属性的时候会产生额外的4px的margin-right。
原始代码
.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;
background-color:#00FF00;
position:relative;
}页面渲染结果：
每一列都会向右产生外边距4px，苦思不得其解，尝试负的外边距，但是涉及到其他的问题:每个li标签会重叠1-2个px，妨碍到鼠标hover状态的事件。尝试修改doctype类型也不见效果。后来尝试了另外一个方法：
把原来的HTML 代码结构：
更改为：
这样就不会产生额外的外边距，也弄不清楚为什么会出现这种问题。先暂时记下，以后再研究研究。
Posted in 前端开发.
Zen Coding- 一个书写HTML跟CSS代码的方法
Zen Coding 是一个高速书写HTML XML XSL(或者其他结构化代码格式)的编辑器插件，核心功能是功能强大的“缩写引擎” 可以根据你输入的公式自动生成HTML代码，
例子：
输入zen coding 代码公式 ： div#page>div.logo+ul#navigation>li*3>a
在textmate下的执行快捷键是 ⌘+E
执行后为：
Posted in 前端开发.
JS 的nextSibling属性(The built-in Javascript property nextSibling)
今天做项目的时候遇到一个变态的问题，CKEditor 嵌入ROR 的时候出现了 一个回车产生2个br 标签的问题(2个回车产生4个br……)，使段落之前的间距变大一倍。
CKeditor本身应该没有问题，为解决此问题，想了一个笨方法： 用JS的nextSibling 属性来查找是否有相邻的2个或者以上的br，有的话直接remove。 (用的是jQuery)。
初始代码：
var brs = $('.format_markdown_text br').size();
var fbr = $('.format_markdown_text br');
for(i=brs-1;i>=0;i--){
if(fbr[i].nextSibling.nodeName == "BR"){
$(fbr[i]).remove();
}
}发现只取到部分的br，查资料发现，firefox、opera、safari会把诸如空格换行之类的排版元素视作节点读取，所以在这些浏览器下只读取了部分br。
改进的代码：
var brs = $('.format_markdown_text br').size();
var fbr = $('.format_markdown_text br');
for(i=brs-1;i>=0;i--){
if(fbr[i].nextSibling.nodeName == "BR" || ($(fbr[i].nextSibling).val().match(/^[\s\r\n]*$/) && fbr[i].nextSibling.nextSibling && fbr[i].nextSibling.nextSibling.nodeName == 'BR')){
$(fbr[i]).remove();
}
}这样就圆满解决了 空格（或者多个）、回车等产生的问题。
Posted in 前端开发.
CSS inline-block 属性
如果你有CSS编程经验的话，那么你对 inline-block 这个CSS属性应该不会陌生，inline-block 是 displaly 属性的一个值，但是这个属性IE6还不支持。在IE6下,对制定了float的元素增加margin 或者padding 属性的时候（margin或者padding的方向跟float一样，比如元素同时拥有float:left和margin-left 属性），会使margin或者padding的距离加倍（双边距bug）。当然你可以使用ie hack 来解决这个问题，在ie6下设置有原始值的一半。如果你用inline-block来代替float的话，就能很好的解决这个问题（大多数情况下）
使用inline-block 来代替float 的解决方案或或许是最有效的方法来实现内联块的价值。
inline-block的定义：
一下是来自一些网站关于inline-block的定义
Sitepoint’s
inline-block makes the element generate a block box that’s laid out as if it were an inline box.
QuirksMode:
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.
Robert Nyman:
Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.
可以理解为：将对象作为内联来显示，但是里面的内容作为块对象来呈现。（周围元素与其保持同一行，但可以设置宽度跟高度的属性）
什么情况下使用：
- 解决ie6双边距bug
- 在横向类块元素上没有float属性
- 使内联元素能设置宽度跟高度，但是同时保持内联显示
- 使内联元素能设置margin和padding 属性
目前 ie6,ie7 不支持 inline-block。但是可以通过触发haslayout来实现inline-block.
实现方法：
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;更多的关于这个实现方法可以参考这里
Posted in 前端开发.
让IE也支持CSS3
IE目前还不支持CSS3的一些属性，通过这个脚本可以实现部分CSS3属性，
脚本下载地址 http://www.keithclark.co.uk/labs/ie-css3/#supported-libaries
Posted in 前端开发.
Fix PNG image transparence in IE6
transparent PNG image in IE6 is very headache!
Here is a another solution called DD_belatedPNG. you can find it here.
Usage:
<!–[if IE 6]>
<script src=”DD_belatedPNG_0.0.8a-min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
DD_belatedPNG.fix(‘ClassName1,ClassName2′);
</script>
<![endif]–>
Posted in 前端开发.
css 文字换行解决方案
word-wrap:break-word; overflow:hidden;
这种最好的方式，在 IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容。
技术总结：
word-wrap是控制换行的。
使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
break-word是控制是否断词的。
normal是默认情况，英文单词不被拆开。
break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。
keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
IE下：
使用word-wrap:break-word;所有的都正常。
FireFox下：
如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。
为了解决长串英文，一般用word-wrap:break-word;word- break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（IE下也是）。
用：overflow:auto; IE下，长串会自动折行。FireFox下，长串会被遮盖。
所以，我们用word-wrap:break- word;overflow:hidden;
Posted in 前端开发.
