0

我正在使用jQuery 验证引擎来验证一些表单字段。除了在 IE7 和 IE8 中，一切都运行良好。

样式表有一个 :focus 类，当表单字段被聚焦时，它会给它们一个蓝色的盒子阴影：

input:focus { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #06c !important; -moz-box-shadow: 0px 0px 1px 1px #06c; box-shadow: 0px 0px 1px 1px #06c; }

当表单字段无效时（由 jQuery 验证引擎定义），我正在使用 jQuery 向表单字段添加一个类，以便这些字段可以具有红色框阴影：

input.error { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #c00 !important; -moz-box-shadow: 0px 0px 1px 1px #c00; box-shadow: 0px 0px 1px 1px #c00; }

这很好用……在 IE9、Firefox 和 Chrome 中。它在 IE8 或 7 中不起作用。（当我们停止支持 IE6 时有一个聚会。）我尝试安装 PIE.htc 并添加一个样式选项来指示这些元素的边框，而不是框阴影，但是似乎没有帮助，它导致错误气泡出现其他一些奇怪的显示，所以我删除了 PIE.htc。然后我尝试了一个单独的样式定义，包含在 IE 条件标签中，为这些输入指定边框，但它仍然不起作用。这是我的条件CSS：

<!--[if lte IE 8]>
<style type="text/css">
input:focus { border: 1px solid #06c; }
input.error { border: 1px solid #c00; }
</style>
<![endif]-->

...帮助？

4

1 回答 1

0

这些浏览器并非支持所有内容。只需忍受它并找到替代方案，例如显示附加消息。或者您可以将输入元素嵌入到 div 中：

​div.invalid {
    display: inline-block; 
    border: 1px solid red;
}​

<div class="invalid">
        <input type="text"/>
</div>​​​​​​​​​​​​​​​​​

如果您开始添加这样的元素，我也会通过 JQuery 来执行此操作，并且最好在仅包含在 IE7 和 8 中的单独代码段中，这样您可以在不再需要它时轻松删除它。或者您可以选择始终使用 div，只div.invalid input{...}为其他浏览器设置样式。

于 2012-09-10T20:31:27.577 回答