Firefox quirk：当图像在同一行上时选择第一个字母 [英] Firefox quirk: select the first letter when an image is on the same line

问题描述

根据 MDN有关 :: first-letter 伪元素：

如果在其行上没有任何其他内容（例如图片或内联表），则元素选择块第一行的第一个字母。

当有一个图像在线上的字母？这是一种经常发生的情况，有时超出我的控制。

以下例证了这种行为在FireFox。

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

 < div> < p> < img src =http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png>此段落不会有预期的样式，因为内置图片。< p> < p>这是第二段。< / p>< / div>< div> < p>此段落将具有预期风格。< / p> < p>这是第二段。< / p>< / div>  

解决方案

这里的抓住是你浮动的图像，这意味着图像不再流入，特别是它的意思是图像不再第一个格式化的行 - 或任何行框。因此，映像仍然内联的声明是不正确的。

Firefox有一个特别偏离（或破碎，取决于你想要看它）的实现 :: first-letter ，主要源于CSS2规范中的歧义，后来在CSS2.1中解决，但仍然没有在浏览器中解决。举个另一个例子，在写你的CSS时，你试图把它应用到 div :: first-letter 只是为了找到它根本无法工作，迫使你必须显式地选择 div p ：first-of-type :: first-letter

  img {float： right;} div ::第一个字母{font-size：2em;}  

 < div> < p> < img src =http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png>此段落不会有预期的样式，不管图片是什么。< / p> ; < p>这是第二段。< / p>< / div>< div> < p>此段落不具有预期风格。< / p> < p>这是第二段。< / p>< / div>  

所有这一切，幸运的是，通过简单地将图像移出第一个 p ，可以解决Firefox手头的问题图像作为 div 的第一个子代替：

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

 < div> < img src =http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png> < p>此段落将具有期望的样式，因为图像现在存在于段落之外，因此不再干扰::第一字母伪元素。< / p> < p>这是第二段。< / p>< / div>< div> < p>此段落将具有预期风格。< / p> < p>这是第二段。< / p>< / div>  

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

(emphasis mine)

So, how does one select the first letter when there is an image on the line? This is a case that happens rather often, sometimes beyond my control.

The below exemplifies this behavior in FireFox. I realize it's intended, but how do I select the first letter anyway?

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

<div>
  <p>
    <img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-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>

解决方案

The catch here is that you've floated the image, which means the image is no longer in-flow and in particular it means the image is no longer in the first formatted line — or any line box, for that matter. Therefore the statement that the image is still inline is incorrect.

Firefox has a particularly deviant (or broken, depending on how you want to look at it) implementation of ::first-letter, mostly stemming from ambiguities in the CSS2 spec that were resolved later in CSS2.1 yet still aren't resolved in the browser. To cite another example, it's not unlikely that while writing your CSS, you've tried to apply it to div::first-letter only to find that it simply doesn't work, forcing you to have to explicitly select div p:first-of-type::first-letter instead.

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

<div>
  <p>
    <img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-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>

All that said, fortunately it is possible to work around the issue at hand in Firefox by simply moving the image out of the first p such that the image exists as the first child of the div instead:

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

<div>
  <img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-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 quirk：当图像在同一行上时选择第一个字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！