仅个人收集用，请不要抱太大期望

原文链接 作者：怿飞尽管有 CSS 的 vertical-align 特性，但是并不能有效解决未知高度的垂直居中问题（在一个 DIV 标签里有未知高度的文本或图片的情况下）。 标 准浏览器如 Mozilla, Opera, Safari 等.，可将父级元素显示方式设定为 TABLE(display: table;) ，内部子元素定为 table-cell (display: table-c

原文链接 作者：怿飞 由于连续的字符（字母、符号、数字）在默认情况下是不换行的，可能会破坏整个界面布局。 那如何解决这个问题呢？ 在 IE 和 Safari 1.3+ 下相对比较容易解决，使用 CSS 属性 word-wrap: break-word;。有朋友会问为什么不是使用 word-break:break-all; ，因为有一个特殊的情况，该属性无法解决换行——连续的英文标点符号

原文链接 作者：怿飞在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。 题目的难点在于两点： 垂直居中； 图片是个置换元素，有些特殊的特性。 至于如何解决，下面

各浏览器CSS hack兼容表： IE6IE7IE8FirefoxChromeSafari!important Y Y  _Y     *YY    *+ Y    /9YYY   /0  Y   nth-of-type(1)    YY代码示例：#test{color:red; /* 所有浏览器都支持 */color:red !important;/* Firefox、IE7支持 */_color:red; /* IE6支持 */*color:red; /* IE6、IE7支持 */*+color:red