iPad 和 iPad 2 渲染 CSS 不同？

Posted 2023-03-12

【中文标题】iPad 和 iPad 2 渲染 CSS 不同？

【英文标题】：iPad & iPad 2 rendering CSS differently?

【发布时间】：2011-12-30 01:03:54

【问题描述】：

我有一个非常令人困惑的问题。我正在开发的网站在 iPad、带有 iPad 用户代理的桌面 Safari 和 iPhone 上看起来不错。换句话说，大多数设备都配备了 Mobile Webkit。

但不知何故，它在 iPad 2 上看起来有所不同。以下是不同之处：

iPad 1

iPad 2

===

如您所见，iPad 2 的布局在该中心列中以某种方式中断。

您可以通过以下网址查看：new.studyusa.com

请注意，据我所知，两款 iPad 都运行 ios 5.0.1。我想不出还有什么要检查的。

显然，最好的帮助是对可能导致此问题的原因做出回应。但是从你的 iPad 上检查一下并告诉我出现了什么几乎一样有帮助，因为我只能在每种型号的一个上进行测试。

谢谢。

【问题讨论】：

在我看来都很好。只有缺陷在右上角。登录链接上有一条 5-6px 的白线。

带有 iPad 用户代理的桌面 Safari 对于测试来说不是很可靠。使用 x-code 获取 iPad 模拟器。 developer.apple.com/technologies/tools

@mohacs，感谢您抓住白线。我刚刚在我的存储库中修复了它，但还没有将它推送到服务器。当你说“在我看来都很好”时，你的意思是你在 iPad1 和 iPad2 上都测试过吗？

【参考方案1】：

好的。这真的很尴尬，但事实证明 iPad2 版本是在 iOS 4.3.3 上的，并且介于那个 iOS 版本和 iOS 5（具有正确布局的那个）之间，Mobile Safari 渲染引擎改变了一个非常重要的事情：

iPad 2 屏幕截图中的第一个标题是h1，第二个标题是h2。 h2 的结束标签是 h1。于是如下：

<h1></h1>
<h2></h1>

然后 iOS 4.3.3 没有将h2 视为已关闭，因此以下<div>s 被视为h2 的一部分。

注意：我只是回答这个问题，因为我希望如果有人犯了像我这样的愚蠢错误，他们会发现这个。