Question

我有以下HTML页面：

<table>
  <tr id="tr"></tr>
</table>

在Chrome DevTools控制台中，我编写了以下代码：

var tr = document.getElementById('tr');
var cs = getComputedStyle(tr);
cs.display;
"table-row"

如预期的那样，显示默认为“表行”。

然后我将显示设置为无：

tr.style.display = 'none';
"none"
cs.display;
"none"

同样，可以正常工作。

然后我使用'unset'来取消显示样式：

tr.style.display = 'unset';
"unset"
cs.display;
"inline"

我希望显示再次变为“表行”，但变为“行内”。

我尝试使用'revert'，但结果相同：

tr.style.display = 'revert';
"revert"
cs.display;
"inline"

“继承”也不起作用：

tr.style.display = 'inherit';
"inherit"
cs.display;
"inline"

我的问题是：这是一个错误吗？不应“还原”，“初始”和“取消设置”全部将显示属性设置回其初始值？

根据Danield的回复进行编辑 @Danield是正确的，还原应该可以完成我的预期，但是还没有得到很好的支持。 Safari确实支持还原：

Answer 1

在CSS中，“初始”值是每个属性，即，它不是指用户代理根据元素类型对其应用的值。

显示属性的初始值为内联。

内联初始值

因此，无论您设置display: initial样式的哪个元素都意味着display: inline。

这是一个简单的例子：

div {
  display: initial;
  width: 200px;
  height: 200px;
  background-color: red;
}

<div>hello</div>

在上面的示例中，我们将display: initial;应用于div。

即使用户代理将display: block应用于div，由于显示元素的初始值是内联的，结果仍为display: inline（注意如何不应用宽度和高度）。

这也解释了为什么display: unset产生display: inline的原因，

如果未设置CSS关键字，则将属性重置为其继承的值从其父级继承，如果没有则从其初始值继承。(MDN)

现在，由于display不是继承的属性-

继承了否

display: unset实际上等效于display: initial

现在，关于revert值-这是我认为OP正在寻找的功能...请参阅the spec regarding revert-CSS范围的属性值之一：

将级联值回滚到用户级别，以便指定计算值，就好像没有为它指定作者级规则一样此元素上的此属性。 ...

但是问题是revert的值当前为not (well) supported。

还原的效果实际上很好地总结了：

将属性值重置为默认值的CSS关键字值由浏览器在其UA样式表中指定，就好像该网页具有不包括任何CSS。例如，display:revert上的<div> 结果为display:block。这与初始值相反，只是根据每个属性进行定义，对于display 是inline。

Answer 2

以下是您应该看到的结果，使用具有各种重置值的“display”属性将各种属性值应用于“tr”元素。请记住，大多数版本的 Internet Explorer 不支持“还原”、“取消设置”或“初始”

下面的这种样式通常是浏览器在安装时随浏览器附带的 UA 样式表中默认提供的样式。你不应该分配这个以及为什么“tr”在大多数浏览器中都能正常工作，没有额外的样式：

tr {
  display: table-row;
}

下面的这种样式将返回浏览器 UA 样式表中的“tr”或“table-row”在大多数浏览器中的值，因此与上面的相同。但仅适用于非 IE 浏览器：

tr {
  display: revert;
}

下面的这种样式将返回“initial”，或“display”的默认属性值（与 tr 元素无关）。在大多数情况下，用户代理中“显示”的默认值是“内联”。这让大多数开发人员感到困惑，因为它不会像“revert”那样退回到浏览器的 UA 默认样式表。仅适用于非 IE 浏览器：

tr {
  display: unset;
}

下面的这种样式是“显示”的非典型用法，因为该属性不是可继承的属性（如字体、颜色等）。这可能会在显示中产生非常奇怪的结果，因为它会继承任何父级的“display”级联值，在“tr”的情况下可能是“table”。不过，“继承”应该适用于 IE 和非 IE 浏览器：

tr {
  display: inherit;
}

如上，下面的这个样式使用 display 的初始值，它是“inline”的“display”属性。不是明智的选择。仅适用于非 IE 浏览器：

tr {
  display: initial;
}