IE8 first-child pseudo class on dynamic elements

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

문제

I am generating search results with AJAX and I am using the first-child pseudo class to remove margin-top from the first result. Unfortunately this class doesn't seem to work on IE8.

I am using <!DOCTYPE html> which is supposed to allow IE8 to accept first-child classes, but after doing some research, it appears as though applying the first-child class to elements which are inserted dynamically, does not work.

Does anyone know a quick and easy workaround for this? Thanks!

Remember, these divs are being generated dynamically, so manually adding a class to the first result div is out of the question, at least with straight HTML.

도움이 되었습니까?

해결책

How are the results being fed? For browser compatibility, I would make the first item have a specific class, which can be targeted via CSS:

HTML:

  <div class="item first-item">Item One</div>
  <div class="item">second item</div>
  <div class="item">second item</div>
  <div class="item last-item">last item</div>

CSS:

  <style>
    .item { margin:8px 0; }
    .item.first-item { margin:0 0 8px; }
    .item.last-item { margin:8px 0 0; }
  </style>

다른 팁

a. Use id attribute for the first results element and reset the margin.

b. Use margin-bottom for the results instead of margin-top, and reset the last element's margin if needed

c. If you have the results in a container, you can set the container's margin-top to negative value equal to the value of first result's margin top

and so on. Many ways to get this done with plain CSS. Good luck.

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