Question

我正在使用jQuery Validation Engine来验证某些表单字段。除了在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]-->

...帮助？

Answer 1

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

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

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

如果你开始添加这样的元素，我也会这样做，虽然也是JQuery，最好是只包含在IE7和8中的单独代码中，所以你可以在不再需要它时轻松删除它。或者您可以选择始终使用div，并为其他浏览器设置样式div.invalid input{...}。

在IE7和IE8中的输入元素（表单域）上显示彩色边框

1 个答案: