android - 如何修复 Chrome for Android 中损坏的验证气泡样式？

Question

我正在使用 HTML5 验证来验证表单。验证过程有效，但问题在于验证消息在 Chrome for Android 中的显示方式。

我该如何解决这个问题？每次我测试时都会发生。

Answer 1

看来你有两个问题:

1. 旧 webkit 版本的 shadowdom 可以使用通用选择器作为目标。即:form.my-form div 尝试使用类作为最后的选择器部分:.my-form .my-div。也许你还应该检查是否需要处理 * {box-sizing: content-box;}。或者，您可以通过使用 webkit pseudos 重新添加正确的样式来修复这些样式:http://trac.webkit.org/wiki/Styling%20Form%20Controls#Formvalidationmessage和 http://trac.webkit.org/wiki/Styling%20Form%20Controls#WebKitr82180orlater
2. 我不确定这里是否发生了这种情况(您的图片不清晰)。旧的 webkit 版本中存在溢出错误。不要使用 overflow: hidden with positioned element 作为表单字段的包装