IE 주변에서 어떻게 일합니까?

StackOverflow https://stackoverflow.com/questions/813419

문제

목록이 많이 있습니다

<ul>
  <li class="first">Item 1</li>
  <li>Item 2</li>
  <li class="last">Item 3</li>
</ul>

스타일

li:after {
  content: ' / ';
}
li.last:after {
  content: '';
}

이것은 일종의 일반적인 문제 여야합니다. HTML을 혼란스럽게하고 중개자를 넣을 수 있다고 생각합니다. <li>IE가로드 브라우저 인 경우 캐릭터가 포함되어 있거나 JavaScript에 연결할 수 있지만 JavaScript가없는 사람들을 잡지는 않습니다. iuno. 나는 HTML을 어수선하는 것에 기대고 있지만 이것에 대한 의견이 있다면 듣고 싶습니다.

도움이 되었습니까?

해결책

  1. 사용 ie7.js 유사성 지원 후 추가 할 수 있습니다.
  2. 조건부 주석을 사용하여 마크 업에 추가하여 해당 효과를 시뮬레이션하거나 기존 스타일 중 일부를 제거하여 분배기없이 읽을 수 있도록 쉽게 읽을 수 있습니다.
  3. 다른 브라우저에서는 다른 것처럼 보이더라도 IE6이 스타일을 재정렬하여 우아하게 저하되도록하십시오.

다른 팁

인터넷 익스플로러 (즉) 다음을 지원하지 않습니다 : 셀렉터 후, 대신 해킹을 사용해야합니다, 예를 들어 이것은 다음과 같습니다.

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + 'xkcd150') : ''); }

"XKCD150" - 이것은 각각 이후에 추가됩니다. <li>.

그것의 표현은 일반적으로 일부 IE 버그를 대체하고 수정하는 데 사용되었습니다.

그래서 전체 코드 이다:

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + ' / ') : ''); }

li.last {
scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : ''); }

첫 번째 줄은 " /"를 추가하고 두 번째 줄은 아무것도 추가하는 데 사용됩니다.

모든 코드는 CSS 파일에 추가되어야합니다.

여기에 마음에 들지 않을 아이디어가 있습니다. 8-) / 기호를 배경 이미지에 넣습니다. <li>에스.

목록 HTML을 생성 할 때 서버 측 언어로 만 수행합니다. 나는 그것이 "HTML을 혼란스럽게하는"것으로 간주 될 것이라고 생각합니다.

JavaScript 및 조건부 의견을 사용합니다. jQuery를 사용하는 IE.

 <!--[if IE 6]>
   <script type='text/javascript'>
     $(document).ready( function() {
      $('li').not('li.last').after('/');
     });
   </script>
 <![endif]-->

별도의 JS 파일을 사용하는 것이 더 좋습니다.
이것은 또한 좋은 브라우저를 위해 CSS에 넣고 IE6의 JavaScript로 다시 넣기 때문에 모든 것을 두 번 써야한다는 단점이 있습니다.

jQuery와 같은 것을 사용해보십시오.

`$ (function () {

$ ( 'li'). not ( ': last-Child'). Append ( '' ');

});`

HTML을 혼란스럽게하지 않습니다. 또한 IE에서만 작동하도록하려면 jQuery 호환성을 사용해보십시오.

런타임에 콘텐츠가 변경되지 않은 경우 다음을 사용할 수 있습니다.

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf000;');
}

컨텐츠가 런타임에 변경하려는 경우 다음과 같은 작업을 수행 할 수 있습니다.

.icon-glass {
  *top:expression(0, this.innerHTML = '&#xf000;');
}

불행히도 이것은 매우 느립니다. IE6에서 성능이 크게 줄어들면서 작동 할 가능성이 있지만 페이지에 너무 많은 아이콘이 있으면 IE7이 충돌 할 가능성이 높습니다. 따라서 아이콘이 거의없고 성능 감소를 감당할 수 없다면이 두 번째 기술을 권장하지 않습니다.

그리고 즉, 마지막 자녀를 지원한다면 클래스를 할 필요가 없습니다 = "last": p.

IE 지원은 계속해서 쓰레기가 될 것입니다. IE 8은 대규모 개선을 해왔습니다. 특히 Microsoft가 IE 8을 Windows Update를 통해 밀어 내기 때문에이 두 가지를 목표로합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top