css - nth-of-type 在 IE 9 中不起作用

Question

我无法让第 nth-of-type 在 IE 9 中工作 -> 目前我的 ccs 代码在 IE 8 上工作。任何人都可以提出解决方法吗？在台式机上我想要 4 cols 和移动到 1 col

网址 http://aboriginalart.org.au/aaaa/artist-members/

.author-block {
  /*width: 48%;*/
  width: 23%;
  /*margin-right: 3.8%;*/
  margin-right: 9px;
  float: left;
  /*margin-bottom: 1.5em;*/
  /*font-size: 14px !important;*/
}
/* 2,4,6 */
.author-block1:nth-of-type(4n) {
  margin-right: 0;
}
/* 1,3,5 */
.author-block1:nth-of-type(4n+1) {
  clear: both;
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 320px) {
  .author-block {
    width: 100%;
    margin-right: 10px;
    float: left;
  }
  /* 2,4,6 */
  .author-block1:nth-of-type(1n) {
    margin-right: 0;
  }
  /* 1,3,5 */
  .author-block1:nth-of-type(1n+1) {
    clear: both;
  }

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 480px) {
  .author-block {
    width: 48%;
    margin-right: 10px;
    float: left;
  }
  /* 2,4,6 */
  .author-block1:nth-of-type(2n) {
    margin-right: 0;
  }
  /* 1,3,5 */
  .author-block1:nth-of-type(2n+1) {
    clear: both;
  }

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 768px) {
  .author-block {
    width: 30%;
    margin-right: 10px;
    float: left;
  }
  /* 2,4,6 */
  .author-block1:nth-of-type(3n) {
    margin-right: 0;
  }
  /* 1,3,5 */
  .author-block1:nth-of-type(3n+1) {
    clear: both;
  }

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
  .author-block {
    width: 24%;
    margin-right: 10px;
    float: left;
  }
  /* 2,4,6 */
  .author-block1:nth-of-type(4n) {
    margin-right: 0;
  }
  /* 1,3,5 */
  .author-block1:nth-of-type(4n+1) {
    clear: both;
  }

Answer 1

除 IE 9-> IE 8 作品外的欢呼声(我已经为 :nth-of-type 更改了 .author-block。然后进行了所有媒体查询 nth-of-type(4n) 而不是组合查询 nth-of-type(1n) nth-of-type(2n)

     .author-block {
      /*width: 48%;*/
      width: 23%;
      /*margin-right: 3.8%;*/
      margin-right: 9px;
      float: left;
      /*margin-bottom: 1.5em;*/
      /*font-size: 14px !important;*/
    }
    /* 2,4,6 */

    .author-block:nth-of-type(4n) {
      margin-right: 0;
    }
    /* 1,3,5 */

    .author-block:nth-of-type(4n+1) {
      clear: both;
    }
    /* Smartphones (landscape) ----------- */

    @media only screen and (min-width: 320px) {
      .author-block {
        width: 100%;
        margin-right: 10px;
        float: left;
      }
      /* 2,4,6 */
      .author-block:nth-of-type(4n) {
        margin-right: 0;
      }
      /* 1,3,5 */
      .author-block:nth-of-type(4n+1) {
        clear: both;
      }
      /* Desktops and laptops ----------- */
      @media only screen and (min-width: 480px) {
        .author-block {
          width: 48%;
          margin-right: 10px;
          float: left;
        }
        /* 2,4,6 */
        .author-block:nth-of-type(4n) {
          margin-right: 0;
        }
        /* 1,3,5 */
        .author-block:nth-of-type(4n+1) {
          clear: both;
        }
        /* Desktops and laptops ----------- */
        @media only screen and (min-width: 768px) {
          .author-block {
            width: 30%;
            margin-right: 10px;
            float: left;
          }
          /* 2,4,6 */
          .author-block:nth-of-type(4n) {
            margin-right: 0;
          }
          /* 1,3,5 */
          .author-block:nth-of-type(4n+1) {
            clear: both;
          }
          /* Desktops and laptops ----------- */
          @media only screen and (min-width: 1224px) {
            .author-block {
              width: 24%;
              margin-right: 10px;
              float: left;
            }