Question

我正在使用:after为所需的标签添加星号：

.field-name
{
    color: #444;
    font-family: verdana;
    font-size: 0.85em;
    line-height: 2em;
}

.field-name.required:after
{
  content: '*';
  color: #ff0000;  
}

当内容不在jQuery对话框中时，这很有用。但是，使用jQuery对话框时，只有在对话框悬停时才会显示星号。有关IE8中的示例，请参阅this jsFiddle。单击按钮，然后将鼠标移到实际的对话窗口上。在所有其他现代浏览器中，这可以按预期工作。这是一个已知的错误吗？

Answer 1

不要使用CSS添加星标。使用javascript方法将文本添加到Dom元素的末尾。 CSS不是内容，而是用于样式化内容。

Answer 2

当通过CSS属性content（可能除了VoiceOver）添加时，屏幕阅读器将不会读取这些星号，即使这是正在传达的重要信息。

你应该在服务器端添加它们：无论是否运行脚本，每个人都会看到它们。您还应该在表单的开头添加一个句子，例如“标有*的字段是必需的”，因为不是每个人都知道这些星是什么意思。

Answer 3

我们知道IE8有issues rendering generated content。 z-index未正确设置。我建议在父元素上设置一个更高的z-index，如here所述。当您将鼠标悬停在它上面时，jQuery UI对话框可能会更改定位属性。不幸的是，我无法对此进行测试，因为我没有在这里运行IE8，但我希望这会有所帮助。

IE8：使用jQuery UI Dialog进行内容延迟后出现

3 个答案: