必填字段指示器在 IE7 和 IE6 中不起作用答案

【问题标题】：Required Field Indicator not working in IE7 and IE6必填字段指示器在 IE7 和 IE6 中不起作用
【发布时间】：2011-01-26 22:39:02
【问题描述】：

我正在使用 CakePHP 的字段验证和基于标准 CSS 的“必填字段”指示符（红色星号），它对除（当然）IE7 和 IE6 之外的所有浏览器都适用。

我似乎不喜欢构成指标的 CSS。我发现 Mark Story（此处为 http://mark-story.com/posts/view/hacking-the-cakephp-formhelper-adding-required-indicators）在 2008 年发表的一篇博客文章建议破解 Cake 代码以正确显示它。这已经是 2 年多以前了，我希望已经为此创建了一个更好的解决方案，或者在那时发布的较新版本的 Cake 中已经以某种方式解决了这个问题。它是如此标准的东西，我无法想象它没有得到解决。

我在 StackOverflow 或 Google 搜索中没有发现任何明显的东西。我只是很密集，错过了一些明显的东西吗？是否有标准/简单的方法可以做到这一点，或者基于图像的修复（如上述帖子的一位评论者所建议的那样）是可行的方法？

【问题讨论】：

仍然对当前版本的 Cake 的答案感到好奇，但在 Mark 的博客文章的第一条评论中建议的 CSS 解决方案似乎效果很好。
可能已经2年多了，但是IE6和IE7在过去两年都没有好转，所以他们以前的问题现在仍然存在。

标签： css internet-explorer cakephp internet-explorer-7 internet-explorer-6

【解决方案1】：

您可以将字段设置为粗体或类似的内容

【讨论】：

【解决方案2】：

我最终使用了来自 Mark Story 博客上的匿名海报的解决方案。只需在您的 site.css 文件中的 form .required label:after 定义之后添加这个额外的 CSS 定义。（在 CakePHP 的默认 site.css 文件的第 363 行左右。）

div.required label {
  stupid-ie-be-more-funny: expression(this.doneReq ? '1' : (
      function(el) {el.innerHTML += '<span title="Required!" style="color:#f00;"> *</span>'; return el.doneReq=true;})(this));
}

这对我来说在 IE 6 和 7 中运行良好。我仍然喜欢红色星号，因为它们在视觉上更加突出，尤其是我的目标人群（老年用户）。

【讨论】：

【解决方案3】：

简单的事实是 IE6 和 IE7 不支持 CSS :before 和 :after 伪类。

没有办法解决这个问题，而且我知道没有任何黑客可以让他们支持它。

我首选的解决方案是忽略它。让它们加粗（正如其他人建议的那样），以便 IE6 用户可以看到一些东西，但坦率地说，IE6 和 IE7 只是浏览器市场的一小部分，而且正在迅速缩小。

如果您必须给他们一个问号，那么我建议的最佳解决方法是将其替换为图像而不是“*”。将你的图片设置为标签的background-image，将其与x-repeat:none;对齐到一侧，padding在同一侧将标签文字移开，这样就可以看到背景图片了。

此方法通常用于项目符号点，因此应该适用于“必需”标记。但我宁愿坚持你所拥有的，并假装 IE6 和 IE7 不存在。他们不会错过它或任何东西。

【讨论】：

我希望我可以忽略 IE6（我向你吐口水！）和 IE7（我踢你！）但是（根据 W3Schools 无论如何w3schools.com/browsers/browsers_explorer.asp）仍然占市场的 10%。还不能完全忽略它们。
@Dan Berlyoung - 请不要依赖 w3schools 来处理这类事情。更好的资源是gs.statcounter.com ...但老实说，唯一真正有用的指标是您自己的站点统计信息。其他人的统计数据对您来说永远不会准确。但我的观点是，您可以支持这些浏览器，而不必为它们提供 100% 的用户体验。如果该网站对他们有用，但他们缺少一些花里胡哨的东西，这真的有问题吗？毕竟，他们仍然可以很好地使用该网站。也许奇怪的缺失功能会鼓励他们升级。