javascript - iPhone 上的日期字段显示不正确

Question

在此页面的住宿选项卡上，有几个使用此日期选择器的日期字段。在桌面浏览器上一切正常，但在 iPhone 上查看页面时，日期显示在字段下方：

顺便说一句，我尝试从当前的（已弃用的）日期选择器升级到这个较新的版本，但没有成功。

Answer 1

我浏览了一下代码，发现其中一个 css 中的声明是导致问题的原因。你似乎合并了你所有的风格，所以我不知道它到底是哪一个（datepicker.css？），无论如何，声明

 .datepicker:before{content:''; display:inline-block;}

是什么导致了问题。我不知道在宏伟计划中这样做的确切目的，但只需删除声明或将display类型从更改inline-block为block，一切都会好起来的。

尝试从那里开始调查，避免破坏其他已经工作的浏览器的样式，并理解那些的含义inline-block，因为它们同时存在于.datepicker:before和.datepicker:after

Answer 2

试试 CSS：

#booking label { width: 100% }

或类似的带有宽度参数的东西，或者可能是：

#booking label { display: block; }

Answer 3

从 iOS 5 开始，可以使用本机日期选择器，而不是使用第三方日期选择器：

<input type="date">

也可以检查浏览器是否支持input type="date". 如果可用，您可以使用浏览器的本机解决方案，并使用第三方日期选择器作为后备。