Question

所以显示的西班牙语句子包含2行，我需要调整＆＃34; expresar＆＃34;单词的第一个字母（不是问号）。

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

是什么原因导致此span元素在Firefox中的行为与Chrome不同？

1 个答案: