AngularJS动画不适用于Firefox

Question

检查此代码：http://jsfiddle.net/j7C5B/

这是html

<div ng-app="myApp">
<div class="searchContainer" ng-controller="SearchCtrl">
    <ul>
        <li class="advSearchRow" ng-show="advSearch">
            <div class="todayButton">Today</div>
            <div class="tomorrowButton">Tomorrow</div>
            <div class="calendarButton">?</div>
        </li>
        <li><div class="advSearchButton" ng-click="display()">Advance Search</div></li>         
    </ul>    
</div>

它与Chrome和Safari完美配合，但它在Firefox中有一种奇怪的行为，任何人都知道它有什么问题吗？我一直试图只留下高度，行高和不同的变化而没有结果。感谢

Answer 1

编辑：这与我的想法非常不同，而且相当简单。 Firefox要求line-height有一个单位，而Webkit浏览器接受无单位值并解释为em。要解决此问题，您只需将em添加到转换（或px，无关紧要，因为它为0，但必须有一个单位）。见http://jsfiddle.net/78rvg/

.advSearchRow.ng-hide
{
    line-height: 0em;
    height: 0;
    opacity: 0;
    margin-bottom: 0;
}

---

问题是：您的代码假定按钮（.todayButton，.tomorrorButton ...）的高度为其容器的高度（.advSearchRow）;在浮动元素的情况下不是这样（这就是我们需要clearfix的原因）。

您可以通过明确指定按钮的假设来解决此问题：

.advSearchRow > div { height: 100% }

或使用overflow: hidden：

.advSearchRow { overflow: hidden }