: after and : before css pseudo elements hack for IE 7

: after and : before css pseudo elements hack for IE 7

---

나는 사용 :after하고 :beforecss 의사 요소를 IE8 및 모든 최신 브라우저에서 잘 작동하지만 IE7 에서는 제대로 작동하지 않습니다 . IE7 에서이 문제를 해결할 수있는 알려진 해킹이 있습니까?

---

순수한 CSS 해킹으로는 불가능합니다.

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/

---

프로젝트에서 IE8.js (http://code.google.com/p/ie7-js/)를 사용하고 있었는데 10/15 초 사이에 IE7을 차단했기 때문에 제거해야했습니다.

IE8.js없이 : after 및 : before 가상 요소로 생성 된 콘텐츠를 관리하기 위해 다음을 수행했습니다.

   .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보다는이 방법을 선호합니다. :)

---

이전과 이후에 이것을 사용할 수 있습니다.

.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;
}

---

이를 위해 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 해킹이 있습니다. 흑 마법이지만 가끔 사용하면 편리합니다.

여기에 설명되어 있습니다. 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;
}

---

Modernizr을 이미 사용하고 있다면 "CSS 생성 콘텐츠"에 대한 핵심 감지 기능이 있습니다.

그런 다음 누락 :before되거나 :afterJavaScript를 사용하여 채울 수 있습니다 . 예를 들면 :

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

생성 된 콘텐츠를 DOM에 직접 삽입하는 jQuery :

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

---

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

ReferenceURL : https://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7