“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值和单位没有明确说明不允许无单位零次，它说的是允许无单位零长度。我相信这意味着无单位零不允许任何其他维度或数量，因为无单位零在规范中从来没有解决。因此，不允许对于时间属性具有无单位零。 ¹

While CSS Values and Units does not explicitly say that unitless zero times are not allowed, it does say that unitless zero lengths are allowed. 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.¹

因此，如果一个时间属性，声明是无效的，应该完全忽略，这是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.

¹

这篇关于“0”上的单位在Firefox中转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！