用:: first-letter将字符串中的第一个字母大写。错误？

Question

最近，我在尝试寻找一种通用的前端方式来大写字符串中的第一个字母时，偶然发现了这种奇怪的行为。通常，我会称之为退出，但我一直在努力寻找解决方案。但是，那是我遇到这种奇怪行为的时候。

摘要：

.capitalizeWord::first-letter {
  text-transform: uppercase;
}

<!-- example 1 -->
<p class="capitalizeWord">
  <span>
    <i></i>
  test1></span>hello
</p>

<!-- example 2 -->
<p class="capitalizeWord">
  <span style="float:left;"> <!--float causes it to work -->
    <i></i>
  test2></span>hello
</p>

据caniuse ::first-letter chrome支持。

所以，我的第一个问题是：是什么原因导致了这种行为？ 这在评论中得到了“某种程度”的答复

我最初的想法是，编译器将<i>-标记解释为chars。但是不，删除这些问题仍然很普遍。 任何人都可以验证他们正在获得相同的结果吗？ 如果您的浏览器看不到我的名字，请发布图片以供参考：

无论如何，我的第二个问题：是否有一种前端方法来完成test2但具有test1的结构？

  

题外话，但仍然可以回答我的第一个问题。见下文

更新：

在评论中进行了一些讨论之后，问题已经缩小到了与<i>标签有关的位置。

但是，我仍然将其归类为错误。原因如下：

空的<i></i> should not触发器::first-letter。就像，通过查看选择器的名称，这应该是不言而喻的。

为什么::first-letter由非字母字符（在这种情况下为 EMPTY html- 标签）触发，然后停止查找该字符在EMPTY 标记中未找到任何内容时，该范围不是根元素（p / div）范围的结尾...像，为什么yyyyyyyyyy？

我可以通过执行以下操作来破坏整个选择器：

.box::first-letter {
  text-transform: uppercase;
}

<div class="box">
  some text
  <!-- wooohoo, works! -->
</div>

<div class="box">
  <i></i>some text
  <!-- doesn't work now... I broke it, without adding ANY characters/letters to the dom -->
</div>

<span class="box">
   some text 
<!-- doesn't work now... I broke it again, just changed to a span-tag -->
</span>

<span class="box" style="display:block;">
   some text 
<!-- wooohoo, works! -->
</span>

也许这是我的固执，但是，我真的很讨厌他们使用此选择器的这种方法。确实可以将它用作“行之有效的方式” ，以便在网络上大写字符串，而不必在其位置上创建所有这些javascript解决方法。

Answer 1

您要问两个特定的不同问题，所以我都将回答它们。

  

我的问题是：是什么导致这种行为？

回答您的问题：浮动元素时，该元素将从文档流中取出，并且就伪元素选择器而言，不再计入块内容的一部分。根据CSS视觉格式规范：

  

如果某个元素是浮动的，绝对定位的或者是根元素，则该元素被称为流出。

     

Visual formatting model - W3

因此，根据规范，如果我们使用其他方法（例如，将元素从流程中删除），则可以看到完全相同的结果。绝对定位：

.capitalizeWord::first-letter {
  text-transform: uppercase;
}

<!-- example 1 -->
<p class="capitalizeWord">
  <span>
    <i></i>
  test1></span>hello
</p>

<!-- example 2 -->
<p class="capitalizeWord">
  <span style="float:left;"> <!-- float causes it to work -->
    <i></i>
  test2></span>hello
</p>

<!-- example 3 -->
<p class="capitalizeWord">
  <span style="position: absolute; left: 50px"> <!-- absolute positioning causes it to work -->
    <i></i>
  test3></span>hello
</p>

  

有没有一种前端方法来完成test2的结果，但是具有test1的结构？

据我所知，在纯CSS中没有办法做到这一点，因为您必须从流程中删除有问题的元素，才能使选择器找到所需的伪元素。通过从流程中删除元素，您的元素将不再具有相同的视觉层次。

  

我仍将其归类为错误

行为符合规范，因此不是错误。您可能会争辩说这是一个糟糕的设计选择。