“0"上的单位Firefox 中的转换 [英] Units on "0s" Transition in Firefox
问题描述
为什么没有单位的以下转换在 Firefox 中不起作用?添加单位后，它就可以工作了.其他主流浏览器似乎对单位无动于衷.
Why doesn't the following transition work in Firefox without the units? Once you add the units, it works. It seems that the other major browsers are indifferent to the units.
据我所知，这是转换时间为0"的唯一示例，没有单位，在 Firefox 中不起作用.
As far as I know, this is the only example of a transition time of '0', without units, not working in Firefox.
您可以看到它正在运行，并且使用单元，在 JSFiddle 中.
You can see it working, and with the units, here at JSFiddle.
这里是没有单位的完全相同的代码，但已损坏，在 JSFiddle 上.
And here is the same exact code without the units, and broken, on JSFiddle.
如您所见，Firefox 是唯一一个似乎出问题的浏览器.另外，这是代码:
As you can see, Firefox is the only browser that seems to break. Also, here's the code:
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;
}
对于与当前问题无关的大量样式"，我深表歉意.但是我使用的样式和失败的转换之间可能存在耦合，所以我完整地包含了代码.这也是一个更漂亮的菜单样式:)
I apologize for the heavy amount of 'styling' that is independent of the issue at hand. But there may be coupling between the styling I'm using and the failed transition, so I'm including the code in full. It's also a much prettier menu with the styling :)
推荐答案
虽然 CSS 值和单位 没有明确说不允许无单位零时间，它确实说长度和角度允许无单位零.我相信这意味着无单位零不允许用于任何其他维度或数量，因为无单位零从未在规范中的任何其他地方提及.因此，不允许时间属性具有无单位零.1
While CSS Values and Units does not explicitly say that unitless zero times are not allowed, it does say that unitless zeroes are allowed for lengths and angles. I believe this implies unitless zeroes are not allowed for any other dimension or quantity, because unitless zeroes are never addressed anywhere else in the spec. Therefore, having a unitless zero for a time property is not allowed.1
因此，如果为时间属性指定了没有单位的零，则声明无效，应该完全忽略，这正是 Firefox 正在做的.在这种情况下，Firefox 正确地遵循了标准，而所有其他浏览器都存在错误.
So, if a zero without a unit is specified for a time property, the declaration is invalid and should be completely ignored, which is what Firefox is doing. In this case, Firefox is following the standard correctly, while all other browsers are buggy.
1 似乎 CSS 最初打算允许无单位零时间值 - 以及其他几个不同的单位 - 在听觉样式表中.这可以解释为什么其他浏览器选择允许无单位零次.然而，由于听觉样式表现在已经过时，该部分不再是规范的，因此，那里的规则不再适用.更讽刺的是，无论如何，主流浏览器都没有实现听觉样式表(好吧，除了 Opera 可能......).
1 It seems that CSS had originally intended to allow unitless zero time values - along with several other different units - in aural style sheets. This may explain why the other browsers choose to allow unitless zero times. However, since aural style sheets are now obsolete, that section is no longer normative and as such, the rules there no longer apply. To add to the irony, none of the major browsers ever implemented aural style sheets anyway (well, besides Opera maybe...).
这篇关于“0"上的单位Firefox 中的转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
