CSS 规则在 IE 8 中不起作用答案

【问题标题】：CSS rules do not work in IE 8CSS 规则在 IE 8 中不起作用
【发布时间】：2012-03-14 17:12:10
【问题描述】：

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

我有这样的代码：

#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 新手。任何帮助表示赞赏。

【问题讨论】：

但是 这个 css 的哪一部分 在 IE 中没有按预期工作？
我有一个适用此 CSS 规则的注册表单。当用户在某些必填字段中提交不正确或空的数据时，我们会在错误字段周围用红色边框突出显示错误字段。这在 IE 中不起作用。红色边框出现在 FF 和 safari 中。

标签： css internet-explorer firefox

【解决方案1】：

在 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。

【讨论】：

我这样做了，我认为它很有帮助。现在我想突出显示错误，但给用户一些提示。我该怎么做？
说我有一个文本字段名字，用户留空，这是一个必填字段。现在我希望用户通过突出显示来注意到这一点。在 FF 中，我可以通过使用上述代码在文本字段周围绘制红色框来突出显示这一点。我可以在 IE 中尝试哪些其他方法？
您希望用户在输入提交按钮后注意到文本字段吗？

【解决方案2】：

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

您还可以在http://www.css3.info/modules/ 上查看 CSS3 模块的当前实现状态

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

【讨论】：

@user1254174 你可以查看这个库css3pie.com。它支持 IE6、7、8 和 IE9 的许多 CSS3 功能
谢谢，这很有用。在安装 PIE 并尝试之前，我需要得到上级的许可。:)

【解决方案3】：

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

<!doctype html>

没有它，或者其他一些特定类型的文档类型声明，IE 在Quirks Mode 中工作。这意味着它不能识别许多 CSS 功能，例如属性选择器（例如 [type=text]）。

为了健壮性，即使在 IE 6 上也能工作（在任何模式下都不识别属性选择器），请考虑使用更简单的选择器，如 input.elementError 并将类 elementError 分配给此类 input 元素，仅用于您想要的元素那个造型。

【讨论】：

我们已经在 HTML 的第一行有这个。 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> w3.org/1999/xhtml"> 我试过 input.elementError 但它仍然无法在 IE 中工作给我 8 个。
我可以将 elementError 应用于输入并根据需要选择字段，但 input.elementError, select.elementError { border: 2px solid #C33; } 不起作用。在 IE 中解决此问题的任何方法..
@user1254174，样式表在 IE 中运行良好。您的页面上还有其他问题会导致问题。请发布出现问题的完整文档的代码或完整文档的 URL。
你是对的，在应用 CSS 规则之前，有些东西在后台没有工作。我现在已经更正了。现在我可以突出显示所有输入字段，但不能突出显示选择下拉菜单。您可以在 [link]www.livetext.com 查看网络应用程序 -> 注册和购买 -> 注册会员 -> 学生 -> 输入 16 位随机数字 -> 点击底部的“注册我的会员帐户”提交表格页面的
@user1254174，到底出了什么问题？我在页面上看不到任何带有class=parentError 的select 元素，尽管div 元素中有select 元素与该类。有一个带有class="grey parentError" 的div 元素，似乎对于它来说，为grey 类设置的背景颜色获胜。请准确描述您期望发生的事情以及您看到的情况。