:after 和 :before 用于 Internet Explorer 7 的 CSS 伪元素破解

Posted 2023-03-06

【中文标题】:after 和 :before 用于 Internet Explorer 7 的 CSS 伪元素破解

【英文标题】：:after and :before CSS pseudo elements hack for Internet Explorer 7

【发布时间】：2011-05-10 01:46:56

【问题描述】：

我正在使用 :after 和 :before CSS 伪元素，它在 Internet Explorer 8 和所有现代浏览器中运行良好，但在 Internet Explorer 7 中运行不正常。 Internet Explorer 7 中是否有已知的黑客可以解决此问题？

【参考方案1】：

使用任何纯 CSS hack 都是不可能的。

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

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

测试页也在那里

之后 - 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/

【讨论】：

感谢您的回复。这是我们可以解决此问题的方法。我不想加载任何外部 java 脚本文件。那么有没有其他方法可以做到这一点。

@saorabh - 我已经更新了答案。使用纯 CSS 我认为 IE6/7 是不可能的。如果您可以提供代码，则有助于理解场景

根据之前和之后需要做的事情，可能只使用 CSS。回答下面发布的要点。

对 Jitendra 的问题...我在我的 jquery 上添加了 Jquery Pseudo...运行良好，但是当我添加到我的服务器上时，它在主页（IE7）上运行良好（IE7）url-homapage/images/image .jpg....但是当我转到另一个页面时，伪路径是这样的：url-homepage/about/images/image.jpg...我怎样才能防止这种情况..我假设它是 js 上的模式..

【参考方案2】：

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

为了维护使用 :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;
   

我更喜欢这种方式而不是 javascript，因为这会将所有选择器保持在同一个位置:)

【讨论】：

什么时候用js执行的？？如何？？ :S

如果您的目标是 <img> 标记，这似乎不起作用的一件事。表达式由于某种原因没有运行。

标签不起作用，因为这是将 after 放入标签 (appendChild) 中，对于 img 之类的内容，您不能这样做。

【参考方案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;

【参考方案4】：

您可以使用 CSS 表达式来执行此操作。例如，您可以通过以下方式插入♣符号：

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

我在 Smashing Magazine 上写了一篇关于此的文章，请参阅 http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/

【讨论】：

css 表达式在 yslow 规则下是黑名单

我认为使用 IE7 会导致速度变慢。 CSS 表达式仅受 IE 支持，并且在 IE8 中被删除。如果您担心速度，请购买更好的浏览器。如果您想支持老客户，请使用慢速黑客。

@Jeremy 你不应该让速度较慢的浏览器变得更慢。你的用户不是你的敌人。

正确！这就是我们首先支持 IE7 的原因。

这个方法好像是在IE7中创建了多个字符，好像IE7在循环使用this.innerHTML设置的内容。有人对这段代码有同样的问题吗？

【参考方案5】：

嗯，有一个纯 CSS hack 可以工作。它是黑魔法，但有时在少量使用时很方便。

这里有解释：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 p>

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;

【讨论】：

@bazmegakapa 这是wayback machine archive.

@d4n3 谢谢。从存档中导入最重要的部分。

【参考方案6】：

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

然后您可以使用 JavaScript 填写缺少的 :before 或 :after。例如：

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

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

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

【参考方案7】：

当需要对 :before 和 :after 的支持时，我使用了我编写的以下要点。它是纯 CSS（你只是写 CSS），但确实包含 CSS 表达式。在大多数情况下都有效。

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"
  );

【讨论】：

css 表达式在 yslow 规则下是黑名单

点了...但 OP 正在寻找“黑客”来解决 IE 中的问题。