Html :after 和 :before 用于 IE 7 的 css 伪元素破解
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4181884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:after and :before css pseudo elements hack for IE 7
提问by Soarabh
I am using :afterand :beforecss pseudo elements and it is working fine in IE8, and all modern browsers but it is not working fine in IE7. Are there known hacks to work around this in IE7?
我正在使用:after和:beforecss 伪元素，它在IE8和所有现代浏览器中都可以正常工作，但在IE7 中不能正常工作。是否有已知的黑客可以在IE7 中解决这个问题？
回答by Jitendra Vyas
with any pure CSS hack it's not possible.
使用任何纯 CSS hack 都是不可能的。
Use IE8.js http://code.google.com/p/ie7-js/
使用 IE8.js http://code.google.com/p/ie7-js/
It has support for this. http://ie7-js.googlecode.com/svn/test/index.html
它对此有支持。http://ie7-js.googlecode.com/svn/test/index.html
test page also there
测试页也有
after - http://ie7-js.googlecode.com/svn/test/after.html
之后 - http://ie7-js.googlecode.com/svn/test/after.html
before - http://ie7-js.googlecode.com/svn/test/before.html
之前 - http://ie7-js.googlecode.com/svn/test/before.html
Edit after 1st comment
第一条评论后编辑
You can just keep this js for IE6 and 7. other browser will not read it.
IE6 和 7 可以保留这个 js，其他浏览器不会读取。
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
And if you are already using jQuery in your project than you can use this plugin
如果你已经在你的项目中使用了 jQuery，那么你可以使用这个插件
jQuery Pseudo Plugin
jQuery 伪插件
回答by vieron
I was using IE8.js (http://code.google.com/p/ie7-js/) in a project and I had to remove it because it blocked IE7 between 10/15 secs.
我在一个项目中使用 IE8.js (http://code.google.com/p/ie7-js/)，我不得不删除它，因为它在 10/15 秒之间阻止了 IE7。
To mantain the content generated with :after and :before pseudo-elements, without IE8.js, I did the following:
为了维护使用 :after 和 :before 伪元素生成的内容，没有 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;
}
I prefer this way rather than with javascript, because this will keep all selectors in the same place :)
我更喜欢这种方式而不是使用 javascript，因为这将使所有选择器保持在同一个地方:)
回答by atiruz
To before and after you can use this:
之前和之后你可以使用这个：
.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;
}
回答by Blazemonger
If you're already using Modernizr, it has a core detect for "CSS Generated Content".
如果您已经在使用Modernizr，它具有“CSS 生成的内容”的核心检测功能。
You can then fill in the missing :beforeor :afterusing JavaScript. For example:
然后您可以填写缺失的:before或:after使用 JavaScript。例如：
.selector:before, .selector-before {
content: "Hello, world!";
color: red;
}
jQuery to insert generated content directly into the DOM:
jQuery 将生成的内容直接插入到 DOM 中：
if (!Modernizr.generatedcontent) {
$('.selector').prepend('<span class="selector-before">Hello, world!</span>');
}
回答by Jens
Well there is a pure CSS hack that works, sort of. It's black magic but is sometimes handy when used scarsely.
嗯，有一个纯粹的 CSS hack 可以工作，有点。这是一种黑魔法，但有时在很少使用时很方便。
It's explained here: http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.phphttp://web.archive.org/web/20080706132651/http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php
解释如下： http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.phphttp://web.archive.org/web/20080706132651/http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php
HTML fragment:
HTML 片段：
<div id="container">
<!-- -->
<div class="mainContent">
<p>Blah blah</p>
<p>Blah blah</p>
<p>Blah blah</p>
<!-- -->
</div>
</div>
CSS:
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-specific stylesheet:
特定于 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;
}
回答by Thierry Koblentz
You can use CSS expressions to do this. For example you could plug a ? symbol via:
您可以使用 CSS 表达式来执行此操作。例如，您可以插入一个 ? 符号通过：
expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '?'+this.innerHTML)
I wrote an article about this on Smashing Magazine, see http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/
我在 Smashing Magazine 上写了一篇关于这个的文章，参见http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/
回答by CoryDorning
When needing support for :before and :after I use the following gist that I wrote. It's pure CSS (to the point were you just write CSS) but does include a CSS expression. Works in most cases.
当需要支持 :before 和 :after 时，我使用我编写的以下要点。它是纯 CSS（就您而言只是编写 CSS），但确实包含一个 CSS 表达式。在大多数情况下都有效。
https://gist.github.com/2362483
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"
);
}
