kraken icon indicating copy to clipboard operation
kraken copied to clipboard

Kraken input element 默认 font-size 大小与 web 不一致

Open temper357 opened this issue 3 years ago • 6 comments

使用的 Kraken 版本 | What version of kraken are you using

main

重现步骤 | Steps To Reproduce

Kraken 上 input 默认 font-size 为 16px,web 上为 13.3333px。

重现代码 | Code example:

  it('basic', async () => {
    const input = document.createElement('input');
    input.style.width = '100px';
    input.setAttribute('value', 'Hello World');

    document.body.appendChild(input);

    await snapshot();
  });

预期结果 | Expected results: image

实际结果 | Actual results: image

temper357 avatar Jun 17 '21 07:06 temper357

Thanks for opening this issue!

openkraken-bot[bot] avatar Jun 17 '21 07:06 openkraken-bot[bot]

通过比较发现 input 的默认 font-size 大小并无标准,取决于浏览器自身设置,chrome 为 13.3333px,safari 和 firefox 为 11px,因此 Kraken 是否需要 follow chrome 的设置?还是保留目前 16px 的不变即可。

temper357 avatar Jun 18 '21 06:06 temper357

input的font-size应该是相对 input 本身的高度的吧?

yuanyan avatar Jun 18 '21 13:06 yuanyan

我记得默认值是按照 line-height 实现的, 当时还查过标准

wssgcg1213 avatar Jun 21 '21 03:06 wssgcg1213

我记得默认值是按照 line-height 实现的, 当时还查过标准

应该都是UA定义的,w3c 应该不会去规范组件的样式

yuanyan avatar Jun 21 '21 13:06 yuanyan

看 W3C mail list 讨论,form 字体大小是继承自系统设置,从字体大小来看正好等于 10pt

Linux menu fonts long ago were typically 10pt (13.33px),

https://lists.w3.org/Archives/Public/www-style/2018Apr/0012.html

temper357 avatar Jun 22 '21 11:06 temper357