日期字段在iPhone上显示不正确

Question

在this page的“住宿”标签上，有几个使用this datepicker的日期字段。在桌面浏览器上一切正常，但在iPhone上查看页面时，日期显示在字段下方：

顺便说一句，我尝试从当前（已弃用）的datepicker升级到this newer version，但它没有用完。

Answer 1

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

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

是什么导致了这个问题。我并不完全知道宏大计划中的目的，但只是删除声明，或将display类型从inline-block更改为block，一切都正常。

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

Answer 2

尝试CSS：

#booking label { width: 100% }

或类似宽度参数的东西 或者可能：

#booking label { display: block; }

Answer 3

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

<input type="date">

也可以check if the browser supports input type="date"。您可以使用浏览器的本机解决方案（如果可用），并使用第三方日期选择器作为后备。