css - 垂直对齐在日期类型输入时关闭

Question

大家

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

这是 html block :

<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;}

浏览器行为分割:

桌面版 Safari 和桌面版 Chrome 均按预期运行。

iPad 上的 iOS Safari:输入字段略高于其标签。

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

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

有没有人知道一个合适的解决方案或解决方法？

Answer 1

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

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

-就对齐方式的变化而言，您可以在 CSS 中尝试这样的操作:

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

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

-因此对齐方式的变化只有在 iPad 上查看时才可见，如上面评论中所建议的，您将需要使用媒体查询，如下所示:

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

更多信息:http://css-tricks.com/snippets/css/ipad-specific-css/