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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 3262 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

cc @Septembers

webkit

里弄

V2EX

23 条回复 • 2015-05-24 13:28:24 +08:00

CatJia1990

2015-05-23 21:57:23 +08:00

字体的原因？

sciooga

2015-05-23 21:59:26 +08:00

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

gongpeione

2015-05-23 22:00:57 +08:00

line-height的问题？

hahastudio

2015-05-23 22:06:45 +08:00

我在 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

2015-05-23 22:08:26 +08:00

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

Kilerd

2015-05-23 22:09:15 +08:00

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

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

Septembers

2015-05-23 22:15:18 +08:00

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

Septembers

2015-05-23 22:15:45 +08:00

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

emric

2015-05-23 22:18:03 +08:00

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

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

Septembers

2015-05-23 22:38:46 +08:00

准确的来说标题应该写成 "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

2015-05-23 22:51:41 +08:00 via Android

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

Septembers

2015-05-23 23:04:01 +08:00

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

Livid

MOD

2015-05-23 23:05:00 +08:00

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

Livid

MOD

2015-05-23 23:06:21 +08:00

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

Septembers

2015-05-23 23:09:57 +08:00

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

Septembers

2015-05-23 23:15:33 +08:00

@Livid 抱歉，没有了解过

ynyounuo

2015-05-23 23:21:03 +08:00

@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