CSS“包含”属性选择器在 IE8 中不起作用答案

【问题标题】：CSS 'contains' attribute selector not working in IE8CSS“包含”属性选择器在 IE8 中不起作用
【发布时间】：2013-06-14 22:59:07
【问题描述】：

我想根据浮动方式更改图像的边距。我使用了 'contains' 属性选择器，除了 IE8 之外它工作得很好。请参阅下面的代码。

我不能真正改变 HTML（例如，不能添加一个类来识别元素）（因为它是由 Drupal 中的所见即所得编辑器生成的）。

谁能建议我可以用来定位“float:left”的替代方案？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
img[style*="float"][style*="left"]
{
    margin: 40px;
    background: red;
}
</style>
</head>
<body>
<img src="http://jsfiddle.net/img/logo.png" style="float:left" width="100" height="100">
</body>
</html>

（我还创建了一个 jsfiddle，但它并不好，因为 jsFiddle 似乎在 IE8 上存在问题：http://jsfiddle.net/spiderplant0/FAxmp/）

【问题讨论】：

在 IE8 上打开：fiddle.jshell.net/spiderplant0/FAxmp/show/light
@RaphaelDDL，谢谢。我也看到了使用此链接的错误。我认为你也看到了 IE8 的错误？
刚刚在windows XP（在VmWare）的IE8中测试过，bug也存在。
尝试使用 jQuery 来选择它，但在 IE8 中也失败了...fiddle.jshell.net/spiderplant0/KZGFD/show/light
Spider，试试@GCyrillus 在答案中所说的：“重新编辑它似乎只解析 style 的值，而不是规则。”。仅使用 img[style*=left] 进行测试。如果 GC 说的是真的，可能会起作用。但是，如果任何图像没有浮动但带有text-align:left;，例如也会被选中。

标签： css internet-explorer-8 css-selectors

【解决方案1】：

如果您已经使用 js 框架，您将需要一个易于实现的 polyfill： http://selectivizr.com/
但是还有其他的。
edit: 正如你所说，你已经在使用一个了。

ie9.js

您应该确保您的样式位于外部文件中，并且显然没有通过 @import 链接，以查看 polyfill 的效率。
干杯

重新编辑它似乎只解析样式值，而不是规则。

因此，以下选择器将适用于 IE8：

img[style*=left] {
    /* css */
}

【讨论】：

不 - IE8 支持所有属性选择器 - 事实上，在本地测试之后，它似乎工作正常..
@CGyrillus，我已经在使用 ie9.js 来改进 IE8。不过也许 selectivizr.com 更好。
@Adrift。你是说它适用于你的IE8吗？那很奇怪。我在 Windows 7 64 位的 IE10 中使用 IE8 仿真模式。请问你用的是哪个版本的IE？
@Adrift，谢谢。 RaphaelIDDLs 链接怎么样...fiddle.jshell.net/spiderplant0/FAxmp/show/light
@Adrift，在真正的 IE8 中它不起作用。 liveweave.com/GIOCxJ 像我使用独立的 IE8（我的虚拟机的 xp）一样测试它并找出会发生什么。