Question

我有一个适用此CSS规则的注册表单。当用户在某些必填字段中提交错误或空数据时，我们会在错误字段周围用红色边框突出显示错误字段。这在IE中不起作用。红色边框出现在FF和野生动物园中。

我有这样的代码：

#errorMsg {
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    border-radius: 5px; 
    background:#FEE !important; 
    border:1px solid #C33; 
    color:#C33 !important; 
    font-size:110%; 
    font-weight:bold; 
    margin: 20px 0; 
    padding:15px; 
    text-align:left;
}

.parentError {
    background: #FEE; 
    border: 1px solid #C33; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    border-radius: 5px; 
    left: -10px; 
    margin-bottom: 10px; 
    padding: 10px; 
    position: relative; 
    top: 0px; 
    width: 635px;
}

[type=text].elementError, 
[type=password].elementError,
select.elementError {
    border: 2px solid #C33;
}

适用于Firefox 8和Safari，但不适用于IE 8。

我是CSS的新手。任何帮助表示赞赏。

Answer 1

IE8不支持CSS3元素，如-moz-border-radius，-webkit-border-radius。但是FF8和Safari都支持CSS3元素。这就是为什么CSS3在FF8和safari中工作的原因。

您还可以在http://www.css3.info/modules/

检查CSS3模块状态的当前实现

此外，您可以在此处查看browser compatibility chart。

Answer 2

在IE中，您可以决定要呈现哪个CSS。您还可以决定在不同版本的IE中呈现不同的CSS。

您可以创建仅限IE的样式表

示例：

目标IE 8和更高版本：

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

此代码仅在IE 8及更高版本中运行。意味着您可以为8及更高版本创建css文件。和较低版本的不同文件，然后是8。

这只是一个例子。这种方法给你很大的力量。

您可以看到此link。

Answer 3

在HTML文档的最开头添加以下行：

<!doctype html>

如果没有它，或者某种特定类型的其他doctype声明，IE可以在Quirks Mode中使用。这意味着，除其他外，它无法识别许多CSS功能，例如属性选择器（如[type=text]）。

为了提高稳健性，即使在IE 6（在任何模式下都无法识别属性选择器）上工作，也可以考虑使用更简单的选择器，如input.elementError，并将类elementError分配给input只有您想要这种样式的元素。

CSS规则在IE 8中不起作用

3 个答案: