我想根据图片的 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/