我想要一种只使用CSS转换的方法，以有效地（和有吸引力地）隐藏/显示悬停时的内容
需要注意的是，我希望保持动态（自动）高度
似乎最佳的方法是在固定高度：0和高度：自动之间转换，但遗憾的是，浏览器中的转换还不支持这一点
回应评论的澄清：：这不是等待所有现有浏览器都兼容CSS3的问题，而是解决CSS3本身的一个明显缺陷（例如缺少高度：0高度：自动）
我已经探索了一些其他方法，这些方法可以在下面的提琴上查看（并在下面详细阐述），但没有一种方法能让我满意，我希望得到其他方法的反馈/提示
http://jsfiddle.net/leifparker/PWbXp/1/
基本CSS
.content{
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
过渡：所有0.5s缓进缓出；
溢出：隐藏；
}
变化#1-最大高度调整
.content{最大高度：0px；}
.activator:hover+.content{最大高度：2000px；}
缺点
a.您需要任意设置一个上限最大高度，该上限具有广泛的动态内容，可能会切断信息
b.如果作为（a）的预防措施，您求助于设置一个非常高的上最大高度，则动画延迟会变得笨拙且无法维持，因为浏览器会无形地转换整个距离。也会降低缓解的视觉效果
变异#2-填充和生长错觉
.content{填充：0px；高度：0px；不透明度：0；}
.activator:hover+.content{填充：10px 0px；高度：自动；不透明度：1；}
缺点
a.很刺耳。这肯定比不知道从哪里弹出内容要好一点，通过转换不透明度效果会更好，但总体来说，它在视觉上并没有那么流畅
变化#3-仅宽度错误的方法
.content{width:0%；}
.activator:hover+.content{width:100%；}
缺点
a.随着宽度的缩小，换行会将多余的文本强制添加到后续行中，最终我们会得到一个超高的不可见div，它仍然需要不动产
变体#4-有效但不稳定的字体大小
.content{字体大小：0em；不透明度：0；}
.activator:hover+.content{font size:1em；不透明度：1；}
缺点
a.虽然这有一种很好的效果，但随着字体的增长，换行符的移动会导致不吸引人的抖动
b.这只适用于包含文本的内容。还需要添加其他转换来管理输入和图像的缩放，虽然这完全可行，但会破坏简单性
变化#5-线条高度的黄油性
.content{行高：0em；不透明度：0；}
.activator:hover+.content{行高：1.2米；不透明度：1；}
缺点
a.我最喜欢的美学风格，但与#4一样，这只适用于纯文本内容。
变体#6-反保证金（由@GraphicsDivine提供）
.wrapper_6{最小高度：20px}
.wrapper_6.activator{z-index:10；position:relative}
.wrapper_6.content{页边距顶端：-100%；}
.wrapper_6.activator:hover+.content{margin top:0}
缺点
a.悬停时有延迟，这不是最佳情况。这是由于.content被隐藏在屏幕上方相当远的位置，并在出现之前花时间向下设置动画的结果
b.页边距顶部：-100%与包含元素的宽度相关。因此，对于流体设计，当窗口缩小得很小时，边距顶部可能不足以隐藏.content
正如我之前所说，如果我们能够在height:0和height:auto之间转换，这一切都将是毫无意义的
在那之前，有什么建议吗
谢谢！
莱夫
试试这个，反边缘：
.wrapper_6{最小高度：20px}
.wrapper_6.activator{z-index:10；position:relative}
.wrapper_6.content{页边距顶端：-100%；}
.wrapper_6.activator:hover+.content{margin top:0}
http://jsfiddle.net/PWbXp/