日期类型输入时垂直对齐关闭答案

【问题标题】：Vertical alignment is off on date type input日期类型输入时垂直对齐关闭
【发布时间】：2014-07-15 21:18:37
【问题描述】：

大家

我在 Web 表单中使用 HTML5 日期类型输入。

这里是 html 块：

<div><!--birthdate-->
    <label for="birthdate" class="col1">Birthdate: </label> 
    <input type="date" class="col2" name="birthdate" id="birthdate" required>
</div><!--END birthdate-->

以及它们的 css 规则：

.col1{text-align:right; width:111px; display:inline-block;}

.col2{width:162px; display:inline-block;}

浏览器行为细分：

Desktop Safari 和 Desktop Chrome 都按预期工作。

来自 iPad 的 iOS Safari：输入字段略高于其标签。

Desktop Firefox 将其显示为文本类型的输入字段。

我没有足够的代表来发布图片，但可以根据要求向个别回复者发送一张。

有没有人知道一个体面的解决方案或解决方法？

【问题讨论】：

有什么方法可以编译一个小提琴？
你可以使用 CSS 来调整你的日期字段： input[type=date] { width: 150px; } 对于 iPad，您必须编写一个媒体查询来进行自己的调整。
我认为这不会影响 iPad 以我想要的方式显示。我已经有一个与 col2 类相关的宽度规则。我的问题是垂直对齐，而不是水平。
@Newbian 我在输入日期时遇到了同样的问题。仅在移动 Safari 上忽略垂直对齐，而输入类型文本按预期工作。所有其他浏览器都按预期工作。你有没有找到解决方案？

标签： css html types datepicker mobile-safari

【解决方案1】：

-回答您关于 Firefox 的问题： https://support.mozilla.org/en-US/questions/986096

输入日期不目前不支持，所以如果你真的想让它与浏览器兼容，你必须寻找替代方法。

-至于对齐的变化，你可以在 CSS 中尝试这样的事情：

input[type=date] { 
     padding-top: 2px; /* margin-top: 2px; ... */
}

将 2px 更改为最合适的值。

-如上面 cmets 中建议的那样，只有在 iPad 上查看对齐方式的变化时才能看到，您需要使用 媒体查询，如下所示：

@media only screen and (device-width: 768px) {
  /* put input[type=date] {...} here */
}

【讨论】：

不幸的是，这似乎对 iPad 浏览器没有影响。即使在没有媒体查询的情况下调整填充也只能在桌面浏览器上显示积极的结果。
如果这不起作用，请尝试其他方法，这里有一个完整的媒体查询列表，请尝试一下（请记住，您还可以根据 iPad 的方向修改填充或边距...)：css-tricks.com/snippets/css/media-queries-for-standard-devices

【解决方案2】：

在 Safari iOS 8.3 和 Bootstrap 3 上，它对我有用：

<input type="date" style="vertical-align:bottom;">

【讨论】：

这不适用于装有最新 iOS 的 iPad。使用这种风格没有任何效果。日期的文本仍然上移。