我目前正在将网站迁移到 HTML 5 并利用新的 input 类型和属性 - 在未实现类型或属性时使用 JavaScript 作为后备。我的问题是，当在 FireFox 中触发所需的消息时，由于它与包含 div 的边界重叠，消息被裁剪，如下所示：
演示：http://jsfiddle.net/f8b7D/2/
有没有办法触发消息的显示以转移到使用更左边的可用空间而不被裁剪？我知道无法使用 CSS 选择消息框，我不希望依赖 JS 解决方案，因为我们有许多用户禁用了 JavaScript。
在 Chrome 中，select 元素的默认消息与消息气泡重叠，尽管它是完全可见的。
在 Opera 中正确显示。
IE 不支持所需的属性。
【问题讨论】：
标签： html validation
在 Firefox 29 中已修复 - 显然是由于 2002 年的一些死代码在有人引起他们的注意后被删除。 https://bugzilla.mozilla.org/show_bug.cgi?id=647813
【讨论】：
恐怕没有办法（也许永远不会有办法）为 HTML5 设置消息气泡的样式。恐怕Javascript是你最好的选择。这里有一些上下文。
【讨论】：
又玩了一圈，我发现消息框的宽度和select元素的宽度是一样的。通过将select 的min-width 设置为消息框的宽度（230px），可以防止裁剪。
select{min-width: 230px;}
这个解决方案绝对是一个 hack，只有当你的网站风格不会被宽 select 元素破坏时才应该使用。如果您只有带有短文本值的 options，例如Yes、No、Maybe 那么选择所需的宽度可能看起来很奇怪，因此请谨慎使用此解决方案。
不幸的是，这对 Chrome 中的外观没有任何影响。
【讨论】：
我找到了一个解决这个 html5 表单错误消息剪辑的解决方案。它是由我们的 CSS 中用于选择元素的宽度引起的。如果您增加宽度，弹出错误消息的宽度也会增加。这似乎也只影响 Firefox。
所以我将“选择”包裹在一个跨度中，并给它一个相对位置。然后我给了选择一个更宽的宽度（以适应错误信息），但也给了它一个负的左边距。您需要根据自己的情况使用自己的 px 宽度，但这解决了问题。我避免为第一个“选项”设置默认值，但我猜你可以在“选项”元素上使用文本对齐。
这个解决方案会产生另一个问题！ Firefox 用于其无效状态的红色轮廓将勾勒出 select 的整个“隐藏”区域，这看起来很奇怪并且与其他元素不同，所以答案是简单地关闭边框，但我使用 css 来表示有效和无效状态只需添加一个背景图标（检查/交叉）以指示表单字段何时有效/无效。我还在我的 css 中使用 x:-moz-any-link 来过滤这些样式，仅适用于 firefox 而没有其他浏览器。这是我的 CSS...
/* start styles for Firefox clipping of validation msgs */
form fieldset > span, x:-moz-any-link {position: relative; }
form select, x:-moz-any-link {width: 230px; margin-left: -82px; }
form select option, x:-moz-any-link {width: 220px; margin-right: -20px; text-align: center; }
form input, form select, x:-moz-any-link {border: solid 1px transparent; box-shadow: none; }
form input:-moz-placeholder, form select:-moz-placeholder, x:-moz-any-link {box-shadow: none !important; }
form input:invalid, form select:invalid, x:-moz-any-link {box-shadow:0 0 3px transparent; }
/* end styles for Firefox clipping of validation msgs */
input:valid {background: #fff url("forms-check.png") no-repeat 130px center; }
input:focus:invalid {background: #fff url("forms-cancel.png") no-repeat 130px center; }
这一切都比我说的简单多了？！ 希望它有用。
【讨论】：