CSS：“显示：自动；”？答案

【问题标题】：CSS: "display: auto;"?CSS：“显示：自动；”？
【发布时间】：2011-07-02 12:30:40
【问题描述】：

几个 CSS 属性提供的auto 选项非常有用。但是，display 属性似乎没有一个。我希望这会根据标签将display 属性设置为浏览器默认值；例如，<div> 将重置为 display: block;，但 <span> 将重置为 display: inline;。

【问题讨论】：

标签： css

【解决方案1】：

你应该使用：

$('element').css('display','');

这将根据当前的 CSS 级联将 display 设置为 element 的默认值。

例如：

<span></span>

$('span').css('display','none');
$('span').css('display','');

将导致span 和display: inline。

但是：

span { display: block }

<span></span>

$('span').css('display','none');
$('span').css('display','');

将产生span 和display: block。

这不是问题：事实上，它几乎总是想要的结果。

【讨论】：

贾，真的。然而，并不完全相同，因为它从元素中删除了属性，允许应用不太具体的规则，而不是用浏览器默认值覆盖这些规则。例如，我在样式表中有a { display: block; }，我希望<a style="display: auto;"> 将其设置为inline。
@eegg：真是巧合，我只是在更新我的答案以消除可能的混乱。显然，我是通灵者。
@eegg：没有display: auto。所有元素的初始值为inline。 browser 使用 CSS 本身为不同的元素设置不同的“默认值”（请参阅我对@Ryan 答案的评论）。没有display: set-to-whatever-the-user-agent-value-is-for-this-element。
这很公平。我原以为 CSS 规范定义了默认值（例如 <div> 是块元素）。很高兴知道否则。
确实，据我所知，W3C 并没有指定哪些元素应该具有哪些默认样式（包括具有 display:block、display:table、display:inline 或其他）。这可以在整个规范中看到，它说诸如“..假设 DIV 和 P 都有'display: block'..”（source）。几年前 W3C 确实发布了一个示例样式表（当时是为 HTML4 编写的）w3.org/TR/CSS2/sample.html

【解决方案2】：

在 CSS3 中，有一个 initial value。或许可以试试display: initial;

【讨论】：

【解决方案3】：

CSS 中没有display: auto 属性，有效值为here

为什么没有自动值？仅仅是因为规则的 CSS 定义。您还应该看到 this article 中概述的关于特异性的 CSS 规则

【讨论】：

默认的display 值是inline，但是浏览器的用户代理样式表为许多元素设置了不同的值。 Firefox 运行这个，例如：mxr.mozilla.org/mozilla-central/source/layout/style/html.css
了解，但是 JS 解决方案不是最佳实践。最佳做法是根据特异性规则分配您想要分配给 CSS html 元素的“默认”值，并且当您想要操作它时使用定义的类。
W3Schools 是一个糟糕的参考网站。这是一个更好的参考网站：reference.sitepoint.com/css/display
@Ryan：W3Schools 是个糟糕的选择。见：w3fools.com。请务必阅读该链接，尤其是：“W3Schools 很麻烦 - W3Schools.com 与 W3C 没有任何关联。W3C 的成员过去曾要求 W3Schools 明确否认任何联系，但他们拒绝这样做。”
@thirtydot 是的，它缺少文档类型，我不应该同意，但我提供了特定资源，HTML HEAD 信息不是所提供信息的一部分。我明白你在说什么，并且你正在阅读我的帖子中不存在的内容。我没有推荐一个网站，而是一个特定的资源页面，大多数人都有能力识别和理解这一点而无需解释。我们现在需要回到正题。

【解决方案4】：

有一个inherit 选项，它：

指定显示属性应该被继承来自父元素

除此之外，根本不设置显示，它将默认为默认值。另外，如果您以编程方式将其设置为空，我相信它只是遵循默认行为：

document.getElementById('myElement').style.display = '';

【讨论】：

【解决方案5】：

根据父元素和相关标签元素，浏览器可以快速调整以适应它。最有效的是在 HTML 开始标记中使用 DTD 标准来声明显示选择器的其他可用属性，否则它只使用“块”和“内联”。因此，如果声明了 DTD，在这种情况下最好使用 display: inline-block; 属性。

【讨论】：