大家
我在 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 将其显示为文本类型的输入字段。
我没有足够的代表来发布图片,但可以根据要求向个别回答者发送一张图片。
有没有人知道一个合适的解决方案或解决方法?
最佳答案
-回答您关于 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 */
}
关于css - 垂直对齐在日期类型输入时关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24768339/