WebKit 在 Android 和 iOS 上的一个不一致的地方

[Livid]

这是 V2EX 的首页在 Android 和 iOS 上的截图。大家看顶部的“全部”那个 tab 及下面的“分享创造”那个标签，感觉 Android 的下面要多空了几个像素。但是两个浏览器都是 WebKit，是我哪里弄错了呢？





cc @Septembers

[CatJia1990]

字体的原因？

[sciooga]

我觉得是字体不同，padding 可能不一样。

[gongpeione]

line-height的问题？

[hahastudio]

我在 OS X Chrome 上模拟了一下，也有同样的现象
UA: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.65 Safari/537.36

我猜是因为
a.tab_current:link, a.tab_current:visited, a.tab_current:active {
font-size: 13px;
line-height: 16px;
}

Chrome 是上对齐，Safari 是中对齐？
我把 line-height 都改成 13px，就没有违和了

[jjplay]

我一般都这样写，height:16px;line-height:16px;

[Kilerd]

用PS 画辅助线看了一下，，好像都是 14px(上方以分享创造底色背景边界为边界 ，下方已“不用”的那个横线为边界)，导师 那个 OpenShare 那个字那里稍微不同，大写 O S 都 是一样， 小写 因为字体问题 导致不一样。

我看出来就是这样，，错了勿喷

[Septembers]

由于我现在手上现在没有Mac环境没进行测试，抱歉 @Livid

[Septembers]

由于我现在手上现在没有Mac环境没法进行测试，抱歉 @Livid

[emric]

是因为 lineheight, 一般这种问题, 都是从 line-height\vertical-align 入手解决.
( 刷新一下, 看到上面已经比我快找到答案了, 点个赞. )

解决方案:
line-height: 1;
padding: 6px;

[Septembers]

准确的来说标题应该写成 "Safari 和 Chrome 的一个表现不一致的地方"

1. Chrome/Chromium 28 开始引入 Blink布局引擎 替换 WebKit布局引擎
2. Android 4.4 开始 WebView 是基于 Chromium 33
3. Android 5 开始 WebView 是基于 Chromium 36
4. Safari 是基于 WebKit2 的
5. Blink 是 WebKit 的一个 fork

see https://developer.chrome.com/multidevice/webview/overview
see https://en.wikipedia.org/wiki/Blink_(layout_engine)
see https://en.wikipedia.org/wiki/Safari_(web_browser)

[KexyBiscuit]

@Livid 快把导航栏上私藏的那个功能交出来～

[Septembers]

@Livid 什么时候能把Gist的两个问题给fix了？

[Livid]

@Septembers 话说，现在正在和 @Kai 同学 FaceTime Audio 中协调这个问题的开发进度。

[Livid]

@Septembers 目前在 Mac 或者 PC 上可以有办法模拟 Android L 浏览器么？

[Septembers]

@Livid 还有一个问题 由于V2EX没有"收藏回复"的功能
因此希望把"感谢"作为一种"收藏回复"的方式使用
进而希望增加一个"曾经感谢"的功能
谢谢

[Septembers]

@Livid 抱歉，没有了解过

[ynyounuo]

@Livid
UA 可以吗？
WebView UA: Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36

[Dreista]

@Livid 可以，用 Genymotion 即可。

[alansalexer]

@Livid 浏览器兼容性测试可以利用一些 web 服务，比如 https://www.browserstack.com

[Dreista]

@Dreista 不过这么用虚拟机总觉得是小题大做……