Firefox 怪癖：select 图像在同一行时的第一个字母

Question

根据 MDN's article on the ::first-letter pseudo-element:

The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

（强调我的）

那么，有图像的时候如何select第一个字母就行了？这种情况经常发生，有时超出我的控制范围。

下面举例说明了 FireFox 中的这种行为。我知道这是有意为之，但我如何 select 第一个字母呢？

img {
  float: right;
}
div p:first-of-type::first-letter {
  font-size: 2em;
}

<div>
  <p>
    <img src="http://blog.whosebug.com/wp-content/uploads/Whosebug-logo-300.png">This paragraph will not have the expected style, because of the inline image.</p>

  <p>This is a second paragraph.</p>
</div>

<div>
  <p>This paragraph will have the expected style.</p>

  <p>This is a second paragraph.</p>
</div>

Answer 1

这里要注意的是你已经浮动了图像，这意味着图像不再是流入的，特别是它意味着图像不再在第一个格式化行中 - 或者任何行框，为此事情。因此，图像仍然是内联的说法是不正确的。

Firefox 对 ::first-letter 的实现特别不正常（或损坏，取决于你想如何看待它），主要源于 CSS2 规范中的歧义，后来在 CSS2.1 但仍未在浏览器中解析。举另一个例子，在写 CSS 时，你试图将它应用到 div::first-letter 却发现 it simply doesn't work，迫使你必须明确地 [=41] =] div p:first-of-type::first-letter 代替。

img {
  float: right;
}
div::first-letter {
  font-size: 2em;
}

<div>
  <p>
    <img src="http://blog.whosebug.com/wp-content/uploads/Whosebug-logo-300.png">This paragraph will not have the expected style, regardless of the image.</p>

  <p>This is a second paragraph.</p>
</div>

<div>
  <p>This paragraph will not have the expected style either.</p>

  <p>This is a second paragraph.</p>
</div>

综上所述，幸运的是，只需将图像从第一个 p 中移出，这样图像就可以作为 div 改为：

img {
  float: right;
}
div p:first-of-type::first-letter {
  font-size: 2em;
}

<div>
  <img src="http://blog.whosebug.com/wp-content/uploads/Whosebug-logo-300.png">

  <p>This paragraph will have the expected style, because the image now exists outside of the paragraph and thus no longer interferes with the ::first-letter pseudo-element.</p>

  <p>This is a second paragraph.</p>
</div>

<div>
  <p>This paragraph will have the expected style.</p>

  <p>This is a second paragraph.</p>
</div>

Firefox 怪癖：select 图像在同一行时的第一个字母

Firefox quirk: select the first letter when an image is on the same line

css

firefox

pseudo-element