为什么开发工具会将此内联元素列为块？

Question

这是什么巫术？内联否决了所有其他规则，但它表示它是阻止的。

代码如下（问题在于div，而不是嵌套的span）：

＆＃13;

＆＃13;

  .mycaption {
  position: absolute; 
  left:5%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: red;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  display: inline;
  width:100%;
  }

＆＃13;

<div class="mycaption">
  <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed DO eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim AD minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip EX ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
</div>

＆＃13;

＆＃13;

＆＃13;

JSBin.

Answer 1

这是因为绝对定位的元素是 out of the content flow ，因此它can't be "inline"包含任何内容。它可以是flex，block，none或与现有内容流无关的任何其他显示类型。