Question

这是代码：https://jsfiddle.net/zz89emkr/1/

.menu-items {
  width: 400px;
  text-indent: 5%;
}    
<div class="menu-items">
    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus quia maiores voluptatum adipisci iusto perferendis earum quasi, accusamus magni temporibus alias consectetur, provident vel quis nesciunt expedita sit nemo aliquam?</span>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo quas esse eius. Quos atque ea necessitatibus labore est error hic. At quae veritatis sit aperiam debitis animi provident dolorum dolore?</div>
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, eaque atque adipisci, fugiat fuga maiores repellendus voluptas non explicabo odio et ut tenetur sint iusto minima unde. Ex, voluptas sed?</span>
</div>

我知道text-indent对内联元素不起作用，但是，在这个例子中，第一个span将获得text-indent。更重要的是，在firefox中，第一个span元素中的text-indent大于div元素中的text-indent。

Answer 1

文字缩进对第一个子跨栏有影响

不，实际上缩进与span无关。因为您已在块元素上设置text-indent - .menu-items - 将在之前应用缩进：

1）容器中的第一个元素/节点 - 无论该元素是inline还是block，还是元素是文本还是其他内容（如图像）和......

2）容器中的所有后续块级文本元素（*）（见下文）

.wpr {
  text-indent: 5%;
}

<div class="wpr">
  This is just a regular text node. However, since it's the <strong>first node</strong> in the container - it is indented (due to text-indent being set on the wrapper div)
  <p>This is some block level text - it's indented</p>
  <span>Here is some inline level text</span>
  <div>Here's some more block level text - again, indented</div>
  This text node is <strong>not indented</strong>
</div>
<hr>
<div class="wpr">
  <img src="http://via.placeholder.com/350x150" alt=""> 
  <p>Notice that the image above is indented (it's the first element in the container) This block level text - so it's also indented</p>
  <span>Here is some inline level text</span>
  <div>Here's some more block level text - again, indented</div>
  This text node is <strong>not indented</strong>
</div>

更重要的是，在firefox中，第一个span元素中的text-indent是大于div元素

首先，firefox上的这种差异只能在以下情况下重现：

1）容器元素具有设定宽度（小于视口宽度）

2）text-indent设置为百分比值

3）容器中的第一个元素不是块级

（所有3个标准都出现在您提供的示例中）

这看起来像是一个错误，因为 firefox 会将缩进（在第一个元素之前）渲染为视口宽度的百分比值容器宽度的百分比！

Codepen Demo（在Firefox中调整大小以查看此内容 - 并密切注意第一行的缩进）

由于The spec明确指出（大胆的）：

百分比：指包含块
的宽度

...我说firefox做错了。

（*）这是我对spec中所说内容的理解：

除非每行和/或挂起关键字另有说明，只有元素的第一个格式化的行 [CSS21] 被影响到的。例如，匿名块框的第一行是只有在它是其父元素的第一个子元素时才受影响。

The spec elsewhere详细阐述了“第一个格式化的行”的含义：

元素的“第一个格式化的行”可能出现在a中同一流程中的块级后代（即块级别）未定位的后代而不是浮子）。例如，第一个 <DIV><P>This line...</P></DIV>中DIV的行是第一行 P（假设P和DIV都是块级）。

Answer 2

将display:block提交给.menu-items span，因为span默认行为为inline-block。

＆＃13;

.menu-items {
  width: 400px;
  text-indent: 5%;
}
.menu-items span{
  display:block;
}

＆＃13;

<div class="menu-items">
    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus quia maiores voluptatum adipisci iusto perferendis earum quasi, accusamus magni temporibus alias consectetur, provident vel quis nesciunt expedita sit nemo aliquam?</span>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo quas esse eius. Quos atque ea necessitatibus labore est error hic. At quae veritatis sit aperiam debitis animi provident dolorum dolore?</div>
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, eaque atque adipisci, fugiat fuga maiores repellendus voluptas non explicabo odio et ut tenetur sint iusto minima unde. Ex, voluptas sed?</span>
  </div>

＆＃13;

文本缩进对div的第一个子span元素有影响吗？

2 个答案: