内联div不显示

我觉得我即将问些愚蠢的东西，但无论如何，这里是：我无法显示嵌入式div在铬或Safari浏览器。这里是我的html文件：内联div不显示

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t </head> 
 
\t <body> 
 
\t \t <div style="display: inline; background-color: red; width: 100px; height: 100px;"></div> 
 
\t \t <div style="display: inline; background-color: bisque; width: 100px; height: 100px;"></div> 
 
\t \t <div style="display: inline; background-color: aliceblue; width: 100px; height: 100px;"></div> 
 
\t \t <div style="display: inline-block; background-color: black; width: 100px; height: 100px;"></div> 
 
\t \t <div style="display: inline; background-color: aqua; width: 100px; height: 100px;"></div> 
 
\t </body> 
 
</html>

显示在所有的是其显示为“inline-block的”一个唯一的股利。没有什么特别的，我想实现，我只是想明白为什么“内联”div不出现，为了进一步我对HTML的理解。从我在网上看到的，其他人似乎正在使用内联div！

来源

2017-04-24 Labrador

@Quentin在下面有答案。拉布拉多，我建议在divs中添加一些内容以进一步测试这些元素的行为。 <！DOCTYPE HTML> \t \t \t \t \t

Red

\t \t

Bisque

\t \t

AliceBlue

\t \t

Aqua

\t –

从the spec：

'高度' 适用于：所有元素，但非替换内嵌元素，表中的列，以及列组

和

宽度适用于：所有元素，但未被替换的行内元素，表行和行组

由于您设置了display: inline div元素是非替换的内联元素，并且不会从这些属性获取任何大小。

这些div没有任何内容，所以它们也没有从内容中获得任何大小。

因此，他们不占用空间，没有什么可以显示背景。

来源

2017-04-24 15:52:29 Quentin

什么是**未替换**内嵌元素？ – 71GA

一次不是[替换]（https://www.w3.org/TR/CSS2/conform.html#replaced-element） – Quentin

内联div不显示

回答

相关问题