html - 是什么导致此 span 元素在 Firefox 中的行为不同于 Chrome？

Question

所以显示的西类牙语句子换行到 2 行，我需要将“expresar”一词与句子的第一个字母(不是问号)对齐。

对于 CSS #1 和相应的 HTML #1 代码，这在 Chrome 中有效，但在 Firefox 中无效(至少在使用 Chrome 39.0 和 Firefox 34.0 的 Linux 上进行测试时)。

但是当我更改为 CSS #2 和相应的 HTML #2 时，我想要的对齐方式可以正常工作。为什么它在 Firefox 中的工作方式与 Chrome 不同？以及我将来如何弄清楚这些细微的差异？

CSS #1

html[lang="es-MX"] #faq-list h3 .text-align .text-align-part {
        margin-left: 8px; }

HTML #1

<div class='text-align'>
  ¿A quién puedo contactar en Stan para más información sobre sujetos humanos en una investigación o para
  <span class='text-align-part'>
    expresar una inquietud o queja?
  </span>
</div>

CSS #2

html[lang="es-MX"] #faq-list h3 .text-align .text-align-part {
        margin-left: 8px;
        display: inline-block; }

HTML #2

<div class='text-align'>
      ¿A quién puedo contactar en Stan para más información sobre sujetos humanos en una investigación o para
    <div class='text-align-part'>
        expresar una inquietud o queja?
    </div>
  </div>

Answer 1

它在两个浏览器中不对齐的原因可能是浏览器处理字体的方式。例如，我作品集中的字体在 Safari 上呈现得非常细，在 Firefox 上呈现得更清晰，但在 Chrome 上呈现正确的大小(但更模糊)。

现在回答你的问题，处理这个问题的最好方法可能是杀死 margin-left 并使用   在第二行前面添加一个空格>

所以您的 HTML #1 看起来像:

<div class='text-align'>
    ¿A quién puedo contactar en Stan para más información sobre sujetos humanos en una investigación o para
    <span class='text-align-part'>
        &nbsp;expresar una inquietud o queja?
    </span>
</div>