Question

所以这是一个愚蠢的......

我们的质量保证部门报告了一个仅存在于Windows 8中的Chrome中的错误。在所有其他平台上的所有其他浏览器中都可以正常使用。错误？ span元素中的文本下降到应该放置的位置，几乎是元素的整个高度，试图对齐。

据报道，我在家工作，所以我实际上在我的iMac上安装了Windows 8并安装了最新的Chrome - 同样由QA测试的版本 - 但无法重现该错误。一切都很完美。尝试了所有可能的屏幕分辨率，一切都很棒。

所以今天我回到了办公室，一位QA家伙把安装了Windows 8的笔记本电脑递给我，你不知道吗？文本未正确对齐。这是联想超极本。但有一点不同：触摸屏。但即使禁用触摸屏（并通过开发控制台验证Chrome不再识别触摸屏）也无法解决问题。

Chrome安装都没有任何插件。

我应该寻找什么？这是代码：

<div id="text_container">
    <span style="padding:0x;" class="textName" id="text_page">Problem Text Is Right Here</span>
</div>

现在......“text_container”CSS包含：

margin: 0;
padding: 0;
width: 1024px;

“textName”定义为：

font-size: 10em;
margin-left: 1.55%;
opacity: 0.7;
position: absolute;
text-transform: uppercase
top: 0.8em;

#text_page没有定义CSS。同样，除了Chrome上的一台Windows 8设备外，所有设备看起来都很完美，这是一款兼容平板电脑的触摸屏笔记本电脑。

Answer 1

感谢您的帮助，伙计们。即使这些建议没有帮助，我仍然很感激时间。

无论如何，我解决了这个问题，是的，根据我的观察，字体大小是用“em”来衡量的。现在，我已经做了几十年的某种其他网站编程，这绝对属于“每天都学到新东西”的范畴......

我总是使用“px”，但同样，编码这个的人希望字体是可扩展的，所以“em”是要走的路。现在，我不知道的是“em”根据基本字体大小自行计算...由于基本字体大小没有定义，我想由浏览器来决定基本字体大小应该。使用开发工具，似乎浏览器默认为16px作为基本字体大小...

...除了我们的Windows 8笔记本电脑上的Chrome，它将基本字体大小设置为24px。经过进一步检查，笔记本电脑的屏幕分辨率非常高：3200 x 1800，所以我猜测它会以某种方式对它产生影响。这也解释了为什么我无法在我的iMac上重现Windows 8中Chrome的问题 - 我的iMac只能达到类似1920 x的东西，所以我几乎无法获得屏幕rez。

所以我进入CSS并将正文的font-size属性设置为16px，这解决了问题。

Answer 2

可能是未设置span标记上vertical-align属性的默认值，因此它默认为“baseline”。

According to the HTML spec，<span>是内联元素，<div>是块元素。现在可以使用display CSS属性进行更改，但存在一个问题：就HTML验证而言，您不能将块元素放在内联元素中：

<span>...<div>foo</div>...</span>

即使您将<div>更改为inline或inline-block，

也不会完全有效。

因此，如果您的元素为inline或inline-block，请使用<span>。如果它是block级元素，请使用<div>。

Span元素在Windows 8上的Chrome中未正确对齐

2 个答案: