Illustration

Robert Carter | Cracked Hat Illustration

原文地址： http://www.behance.net/gallery/Robert-Carter–Cracked-Hat-Illustration/175815

请点此链接

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

原始代码

页面渲染结果：

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

把原来的HTML 代码结构：

更改为：

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

Zen Coding 是一个高速书写HTML XML XSL(或者其他结构化代码格式)的编辑器插件，核心功能是功能强大的“缩写引擎” 可以根据你输入的公式自动生成HTML代码，

例子：

输入zen coding 代码公式 ： div#page>div.logo+ul#navigation>li*3>a

在textmate下的执行快捷键是 ⌘+E

执行后为：

点击查看更多关于zen coding 的语法

“缩写引擎”  拥有模块化结构，允许你在不同的语言上扩展公式。zen coding 现在支持的语言有：CSS, HTML, XML/XSL 和 HAML(需要 filters 支持)

—————————————————————————————

“缩写引擎” 目前支持的功能：

1. ID跟CLASS属性：div#page.section.main
2. 自定义属性: div[title]，a[title="Hello world" rel], td[colspan=2]
3. 同时生成N个元素： li*5 会生成5个li 标签
4. 使用$字符生成递增数字元素： li.item$*3  生成
5. 使用多个$字符生成多位数列：  li.item$$$ -> li.item001
6. 无限制嵌套公式支持：div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
7. 支持 Filters
8. div 标签可以省略，直接从id或者是class开始 #content>.section is the same as div#content>div.section.

可以观看 视频 跟 Smashing Magazine 上的 教程

官方支持的编辑器：

1. Aptana/Eclipse
2. Textmate
3. Coda
4. Espresso
5. Komodo
6. Notepad++
7. PSPad
8. <textarea>(基于网站的编辑器) DEMO
9. editArea (基于网站的编辑器) DEMO

点击查看官网

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

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

改进的代码：

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

如果你有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.

实现方法：

更多的关于这个实现方法可以参考这里

IE目前还不支持CSS3的一些属性，通过这个脚本可以实现部分CSS3属性，

脚本下载地址 http://www.keithclark.co.uk/labs/ie-css3/#supported-libaries

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]–>

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;