Firefox中“0”转换的单位
为什么不在没有单位的Firefox中工作? 一旦你添加单位,它的作品。 其他主stream浏览器似乎对单位漠不关心。
据我所知,这是过渡时间'0'的唯一例子,没有单位,不工作在Firefox。
你可以看到它的工作,并与单位, 这里在JSFiddle 。
这里是没有单位的相同的确切代码,并在JSFiddle上打破 。
正如你所看到的,Firefox是唯一一个似乎打破的浏览器。 另外,这里是代码:
HTML:
<nav> <ul id="nav"> <li> <a href="#" id="nav1">Home</a> </li> <li> <a href="pasta.html" id="nav2">Charters</a> <ul> <li><a href="#">New Groups</a></li> <li><a href="#">Current Groups</a></li> </ul> </li> <li> <a href="same.php" id="nav3">Funding</a> <ul> <li><a href="#">Funding Guide</a></li> <li><a href="#">Get Funding</a></li> <li><a href="#">Treasurers</a></li> <li><a href="#">Calendar</a></li> </ul> </li> <li> <a href="#" id="nav4">Accounts</a> </li> <li> <a href="magis2.swf" id="nav5">Services</a> <ul> <li><a href="#">Shuttle Service</a></li> <li><a href="#">Van Reservations</a></li> <li><a href="#">Rattech</a></li> <li><a href="#">Sound System</a></li> </ul> </li> </ul> </nav>
CSS:
/**************************** Functionality *****************************/ /* Menu header */ #nav > li { float: left; margin: 0 19px; padding: 0 1px 19px 0; position: relative; } /* Dropdown elements */ #nav > li:hover ul { opacity: 1; visibility: visible; -webkit-transition-delay: 0, 0; /*Remove the units here and in the next selector to break it*/ -moz-transition-delay: 0s, 0s; -o-transition-delay: 0, 0; transition-delay: 0, 0; } #nav ul { visibility: hidden; z-index: 1000; width: 140px; padding: 8px 0; position: absolute; top: 35px; left: -35px; opacity: 0; background-color: #fff; border: 1px solid #aaa; border-radius: 2px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3); -webkit-transition-property: opacity, visibility; -moz-transition-property: opacity, visibility; -o-transition-property: opacity, visibility; transition-property: opacity, visibility; -webkit-transition-duration: .2s, 0; /*Remove the units here and below to break it*/ -moz-transition-duration: .2s, 0s; -o-transition-duration: .2s, 0; transition-duration: .2s, 0; -webkit-transition-delay: 0, .2s; /*Remove the units here and below to break it*/ -moz-transition-delay: 0s, .2s; -o-transition-delay: 0, .2s; transition-delay: 0, .2s; } /********* Style (this should be irrelevant) *********/ a { color: #000; display: block; font-size: 13px; text-decoration: none; font-family: 'Georgia', serif; } #nav ul a { font-size: 12px; padding: 10px 18px; } #nav ul li:hover { background: #e9e9e9; } nav { width: 470px; height: 45px; margin-top: 40px; margin-left: 10px; }
对于那些与手头问题无关的“造型”,我表示抱歉。 但是,我使用的样式和失败的转换之间可能会有耦合,所以我将包含完整的代码。 这也是一个更漂亮的菜单与造型:)
虽然CSS值和单位没有明确说无单位零时间是不允许的,但它确实表示允许长度和angular度的无单位零。 我相信这意味着无单位零是不允许的任何其他维度或数量,因为无单位零是从来没有在规范的其他地方解决。 因此,不允许有一个时间属性为零的单位。 1
因此,如果为时间属性指定了没有单位的零,则声明是无效的,应该完全忽略,这就是Firefox正在做的事情。 在这种情况下,Firefox正确地遵循标准,而所有其他浏览器都是错误的。
1 似乎CSS本来打算在声音样式表中允许无单位的零时间值以及其他几个不同的单位。 这可以解释为什么其他浏览器select允许无单位零时间。 但是,由于音乐样式performance在已经过时,该部分不再是规范性的,因此,那里的规则不再适用。 更讽刺的是,无论如何,主要的浏览器都没有实现过音乐样式表(好吧,除了Opera以外)。