CSS3动画实现mouseLeave和mouseEnter的不同效果
Eric在Inconsistent Transitions 中指出CSS3动画在浏览器中的不一致。
transition: 1s transform;
transform: rotate(270deg);
}
上面代码只在鼠标移动到div上时有过渡动画(transition)，在鼠标离开div时没有过渡动画。并给出如下解决文案：
transition: 1s transform;
}
div:hover span {
transform: rotate(270deg);
}
这样，当鼠标进入和离开div时，都有过渡动画效果。其实我们可以进一步实现鼠标进入（mouseEnter）和鼠标离开（mouseLeave）的不同效果。
div span {
transition: 3s transform;
}
/*mouseenter*/
div:hover span {
transform: rotate(270deg);
transition: 1s transform;
}
这样，就实现了mouseLeave和mouseEnter的不同过渡效果。
跨浏览器的box-shadow实现文案
有点标题党了，opera和IE9支持原生的box-shadow属性，Firefox/Chrome需要添加浏览器前缀支持，所以主要是解决IE6/IE7/IE8等不支持box-shadow的浏览器的兼容方案。可以使用滤镜中的Shadow或DropShadow来实现，推荐使用DropShadow。直接上代码：
.box-shadow{
filter:progid:DXImageTransform.Microsoft.dropshadow(offx=3, offy=3, color=#DADADA, positive=true);
-moz-box-shadow:3px 3px #DADADA;
-webkit-box-shadow:3px 3px #DADADA;
box-shadow:3px 3px #DADADA;
}
DropShadow滤镜只能同时在相邻的两边实现阴影，不支持内阴影、扩散。
border和负margin实现等高(增强版)
在工作中经常能遇到两栏或多栏的等高实现，网上也有很多种实现方法。其中最常见的是 利用border和negative margin实现，典型代码如下：
<div class="siderbar">
<h2>Siderbar</h2>
<p>边栏</p>
</div>
<div class="main">
<h2>Main</h2>
<p>主体</p>
</div>
</div>
background:#ffe3a6;
overflow:hidden;
zoom:1;
}
.siderbar{
position:relative;
float:left;
width:200px;
margin-right:-200px;
background:#d4c37b;
}
.main{
float:left;
border-left:200px solid #d4C37B;
}
这种方式很常用。缺点是不能在siderbar和main之间增加border。smashingmagazine解决了这个问题，实现很新颖，结构不变，只是修改了样式：
position:relative;
display:inline-block;
border-left:200px solid #ffe3a6;
background:#d4C37B;
}
.siderbar{
position:relative;
float:left;
display:inline;
width:200px;
margin-left:-200px;
margin-right:-1px;
border-right:1px solid red;
}
.main{
float:left;
border-left:1px solid red;
}
为了兼容IE6给wrapper和siderbar添加position:relative。wrapper设置display:inline-block，使内容可利用负margin技术平移，在标准浏览器下建立Block Formatting Contexts、IE6/7下触发了layout实现了清浮动。 main和siderbar分别设置border-left和border-right，然后通过负margin实现border重叠，从而实现边距等高。
纯CSS实现选项卡
方法一：利用锚点和滚动条
这个方法主要是利用锚点的跳转特性结合滚动条来实现的。在实际应用中没有意义，只是用来研究和拓展思路的。废话不说了，上代码：
<div id="tab-c1">
<div class="nav">
<a href="#tab1">tab1</a>
<a href="#tab2">tab2</a>
<a href="#tab3">tab3</a>
<a href="#tab4">tab4</a>
</div>
<div class="content">
<div id="tab1">选项卡1</div>
<div id="tab2">选项卡2</div>
<div id="tab3">选项卡3</div>
<div id="tab4">选项卡4</div>
</div>
</div>
#tab-c1{
width:400px;
}
#tab-c1 .content{
height:200px;
overflow:hidden;
}
#tab-c1 .content div{
height:200px;
}
上面这种方法兼容各个浏览器：IE6+、Firefox、Chrome、Opera、Safari。
方法2：利用CSS3伪类target实现
利用CSS3的伪类taget结合display实现的，HTML结构同上，只需要稍微修改下CSS就行了。
#tab-c1 .content div{
display:none;
}
#tab-c1 .content div:target{
display:block;
}
这种方法需要支持:target伪类的浏览器。IE9、Firefox、Chrome、Opera、Safari。
Block Formatting Contexts
Block Formatting Contexts定义在CSS2.1中。它满足以下条件之一：
- float值非none
- overflow值非visible
- position值非static和relative
- display值为table-cell、table-caption或inline-block
需要注意的是display:table并不会产生新的Block Formatting Contexts，但是它产生的table-cell或table-caption会产生新的Block Formatting Contexts。
Block Formatting Contexts的作用清除浮动和阻止Collapsing margins
Collapsing margins
在CSS2.1中水平外边距不会重叠。Collapsing margins指的是垂直方向的重叠。
- 普通文档流中的垂直相邻元素会出现外边距重叠
- 浮动(float)元素和其他元素不会重叠(也不会和它的普通子元素重叠)
- 使用float或overflow值非visible产生新Block Formatting Contexts元素不会重叠(也不会和它的普通子元素重叠)
- 绝对定位元素(包含absolute和fixed)不会重叠(也不会和它的普通子元素重叠)
- inline-block元素不会重叠(也不会和它的普通子元素重叠)
float影响的是一个Block Formatting Contexts元素内的布局，不会影响另一个Block Formatting Contexts元素内的布局。IE8+开始支持Block Formatting Contexts，在IE6/7中可以用layout实现类似功能。
IE6中触发layout的属性：
- position: absolute | fixed
- float: left | right
- display: inline-block
- width/height: 除auto以外的值
- zoom: 除normal以外的值
- writing-mode: tb-rl
IE7中新增加的触发layout的属性：
- min-width/min-height任意值
- max-width/max-height 除none外任何值
- overflow: 除visible外的任何值
- overflow-x/overflow-y: 除visible外的任何值
本文大部分翻译自：CSS101: Block Formatting Contexts
CSS for debugging
最近看了CSS Best practices ppt，其中讲到CSS for debugging。
Using style as markup anti-pesto
Advanced CSS selectors can be used to isolate offending tags in the markup
Just create a debug.css file and define some styles addressing links with empty hrefs, no alt on images, inline style, etc
You can import this file when you think you are done with your markup / layout and just take it off before it goes live (once you took care of those bugs!)
Finding images with missing attrs
img[alt=""] {border: 3px solid orange;}
img[title=""] {outline: 3px solid orange;}
img:not([alt]) {border: 5px solid orange;}
img:not([title]) {outline: 5px solid orange;}
Finding links with missing hrefs
a[href="#"]{background: orange;}
a[href=""]{background: orange;}
再谈：IE6文字溢出Bug
这种Bug只存在于IE6中，产生文字溢出的典型结构如下：
<div id="parent" style="width:400px;">
<div id="f1" style="float:left;"></div>
<!---->
<!---->
<!---->
<div id="f2" style="float:left;width:400px;">下面多出了文字：十九八七六五四三二一</div>
</div>
这种Bug的产生需要以下条件：
- div#parent的width小于div#f2或者div#f2的子元素的width+3。
- 浮动元素div#f1和div#f2之间存在注释或内联(inline)元素(例如span、em、strong)或设置了display:inline的空块状(block)元素(例如div、hx)或设置了display:none的元素。
解决办法：
- 给父级元素div#parent设置display:inline(使width失效)
- 确保div#parent的width大于div#f2或者div#f2的子元素的width+3
- 给div#f2设置position:relative
- 不在浮动元素之间放置空的内联元素和设置了display:inline/none的元素