第 n 个类型在 IE 9 中不起作用

Question

我无法让 nth-of-type 在 IE 9 中工作 -> 目前我的 ccs 代码正在 IE 8 上工作。有人可以建议解决方法吗？在桌面上我想要 4 列和移动到 1 列

网址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 问题，我在所有查询中添加了 closes }。呵呵

.author-block {

/宽度：48%；/

宽度：23%；

/margin-right: 3.8%;/

margin-right: 9px;

浮动：左；

/margin-bottom: 1.5em;/

/字体大小：14px !important;/

}

/* 2,4,6 */

.author-block:nth-of-type(4n) {

margin-right: 0;

}

/* 1,3,5 */

.author-block:nth-of-type(4n+1) {

明确：两者；

}

/* 智能手机（横向）----------- */

@media only screen and (min-width: 321px) {

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

}

}

/* 台式机和笔记本电脑 ----------- */

@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;

  }

}

@media only screen and (min-width: 1224px) {

    .author-block {

      width: 24%;

      margin-right: 10px;

      float: left;

    }

}

Answer 2

除了 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;
            }