css - 为什么开发工具将此内联元素列为 block ？

Question

这是什么魔法？ inline 否决所有其他规则，但它表示它是 block 。

代码如下(问题出在 div，而不是嵌套 span):

  .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%;
  }

<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>

JSBin.

Answer 1

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