：之后和：之前CSS的伪元素攻击IE 7

我使用:after和:before CSS伪元素，它在IE8和所有的现代浏览器，但它在IE7中工作正常工作正常。 有没有知道黑客在IE7中解决这个问题？

Answer 1

与任何纯粹的CSS黑客这是不可能的。

使用IE8.js http://code.google.com/p/ie7-js/

它对此有支持。 http://ie7-js.googlecode.com/svn/test/index.html

testing页面也在那里

之后 – http://ie7-js.googlecode.com/svn/test/after.html

之前 – http://ie7-js.googlecode.com/svn/test/before.html

在第一条评论后编辑

你可以保留这个IE6和7的JS。其他浏览器将不会读取它。

 <!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> <![endif]--> 

如果你已经在你的项目中使用jQuery，那么你可以使用这个插件

jQuery伪插件

http://jquery.lukelutman.com/plugins/pseudo/

Answer 2

我在一个项目中使用了IE8.js（http://code.google.com/p/ie7-js/），我不得不删除它，因为它在10/15秒之间阻止了IE7。;

为了保证：在伪元素之前和之后生成的内容，没有IE8.js，我做了以下操作：

  .tabs { *zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("small") ).className="after" ); } .tabs:after, .tabs .after { content: ''; display:block; height:10px; width:100%; background:red; } 

我更喜欢这种方式，而不是与JavaScript，因为这将保持所有select器在同一个地方:)

Answer 3

在之前和之后你可以使用这个：

 .tabs { *zoom: expression( this.runtimeStyle.zoom="1", this.insertBefore( document.createElement("div"), this.childNodes[0] ).className="before", this.appendChild( document.createElement("div") ).className="after" ); } ... .tabs::before, .tabs .before { display: block; width: 10px; height: 20px; background-color: #eee; float: left; } .tabs::after, .tabs .after { display: block; width: 10px; height: 20px; background-color: #c0c; float: left; } 

Answer 4

你可以使用CSSexpression式来做到这一点。 例如，您可以通过以下方式插入♣符号：

 expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML) 

我在“粉碎杂志”上写了一篇关于这方面的文章，参见http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/

Answer 5

那么有一个纯CSS的黑客工作，有点。 这是黑魔法，但使用时有时很方便。

这里解释： http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php http://web.archive.org/web/20080706132651/http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php

HTML片段：

 <div id="container"> <!-- --> <div class="mainContent"> <p>Blah blah</p> <p>Blah blah</p> <p>Blah blah</p> <!-- --> </div> </div> 

CSS：

 #container:before { background: url("corners-top.png"); content: ""; display: block; height: 24px; } #container .mainContent:after { background: url("corners-bottom.png"); content: ""; display: block; height: 28px; } 

特定于IE的样式表：

 #container * { background: url("corners-top.png"); display: list-item; font-size: 24px; line-height: 24px; list-style: none; } #container .mainContent { background: none; display: block; font-size: 1em; line-height: 1.25; } #container .mainContent * { background: url("corners-bottom.png"); font-size: 28px; line-height: 28px; } /* Now, still in the IE-specific stylesheet, remove the styles for all element descendants of .mainContent. Refer to each element by tag name. */ #container .mainContent p, #container .mainContent div, (And so on...) { background: none; display: block; font-size: 1em; line-height: 1.25; } 

Answer 6

如果您已经使用Modernizr ，它具有“CSS生成的内容”的核心检测。

然后，您可以使用JavaScript :before或之后填写缺less的内容。 例如：

 .selector:before, .selector-before { content: "Hello, world!"; color: red; } 

jQuery将生成的内容直接插入到DOM中：

 if (!Modernizr.generatedcontent) { $('.selector').prepend('<span class="selector-before">Hello, world!</span>'); } 

Answer 7

需要支持的时候：之前和之后：我使用了我写的以下要点。 这是纯粹的CSS（直到你写了CSS），但包括一个CSSexpression式。 在大多数情况下工作。

https://gist.github.com/2362483

 /* ============================================================================= CSS Declarations ========================================================================== */ /* ==|== The Standard Way =================================================== */ .foo::before { /* ...css rules... */ } .foo::after{ /* ...css rules... */ } /* ==|== The IE Way =================================================== */ /* NOTE: a comma separated IE & Standard rule won't work. * * IE doesn't understand ::before or ::after & ignores the declaration */ .lt-ie9 .foo:before, .lt-ie8 .foo .ie-before { /* ...css rules... */ } .lt-ie9 .foo:after, .lt-ie8 .foo .ie-after { /* ...css rules... */ } /* ============================================================================= IE6 & IE7 polyfills ========================================================================== */ .lt-ie8 .foo { zoom: expression( this.runtimeStyle.zoom="1", /* ::before polyfill - creates <i class="ie-before"></i> */ this.insertBefore( document.createElement("i"), this.firstChild ).className="ie-before", /* ::after polyfill - creates <i class="ie-after"></i> */ this.appendChild( document.createElement("i") ).className="ie-after" ); }