CSS 'contains' 属性选择器在 IE8 中不工作

标签 css internet-explorer-8 css-selectors

我想根据图片的 float 方式更改图片的边距。我使用了“包含”属性选择器,它在 IE8 之外工作正常。请参阅下面的代码。

我真的不能改变 HTML(例如不能添加一个类来标识元素)(因为它是由 Drupal 中的 WYSIWYG 编辑器生成的)。

任何人都可以建议我可以用来定位“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/)

最佳答案

您将需要一个 polyfill,如果您已经使用 js 框架,则很容易实现: http://selectivizr.com/
但是还有其他的。
编辑: 如您所说,您已经在使用一个。

ie9.js

您应该确保您的样式在外部文件中并且显然没有通过 @import 链接,以便看到 polyfills 的效率。
干杯

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

因此,以下选择器将在 IE8 上工作:

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

关于CSS 'contains' 属性选择器在 IE8 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17097652/

相关文章:

html - 汉堡菜单项折叠成 2 行

html - 方形网格响应

jquery - 向类中添加自定义伪 CSS

css - 如何在 Internet Explorer 8 中删除单选按钮周围的框

html - 在 IE8 上具有列跨越的固定大小表

javascript - 正确缩放 html 并使用 javascript/jquery 附加新信息

html - CSS 将视口(viewport)中的元素垂直和水平居中并使其响应跨浏览器

css - 选择器引擎朝哪个方向准确读取?

css - 如何仅使用css检查类是否存在

jquery - 如何选择所有带有特定文本的 anchor 标签