Question

有时我看到设计师使用display: block来获取块级元素？例如，我看到人们使用display:block对已经是块级元素的元素（如ul, li）和标题h1, h2, h3等等。

如果浏览器已将这些元素视为块级元素，为什么我必须在它们上使用显示块？

提前致谢

Answer 1

大多数浏览器都会正确识别h1，h2，ul（它们始终包含在HTML中），但适用于较新的HTML5元素，例如header，footer和main和canvas这是一个很好的做法。因为较旧的浏览器无法识别它们，但如果您确实将它们声明为block元素，它们将正确显示它们。

例如，IE8无法识别footer并将页脚显示为内联元素（在大多数会导致混乱的网站上）。（http://caniuse.com/#search=footer）

此代码块来自normalize.css常用的CSS样式表，以“规范化”跨浏览器的元素显示：

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

评论指出了他们应用display: block的原因。

在某些情况下，display: block可用于设置之前在CSS中更改的属性。例如，如果插件想要确保其标题显示为块，则会将h1，h2 ...设置为display: block，因为它所包含的网站可能已设置为{{ 1}}到h1。

Answer 2

这样做可以帮助旧版浏览器正确显示现代HTML。对于自HTML 1.0以来一直存在的ul，li，h1等标签，它实在是太过分了。 display: block通常是这样做的，以便现有的HTML标签，即HTML 5，如canvas，article等新的，可以由旧的或非标准的浏览器显示。

为什么使用display：block作为块级元素

2 个答案: