Question

大家

我在网络表单中使用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;}

浏览器行为细分：

桌面版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/

Answer 2

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

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

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

2 个答案: