是什么导致这个span元素在Firefox中的行为与Chrome不同

Question

因此，显示的西班牙语句子换行为2行，我需要将"expressar"单词与句子的第一个字母（而不是问号）对齐。

对于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>