css样式在chrom中被破坏

Question

开发环境

我用的是react-paginate库。我使用css对其进行样式设置。
当我在mac chrom上查看它时，样式未被破坏，但当我在windows chrom上查看它时，css样式被破坏。
ReactPaginate的类名为pagination，并使用css进行样式设置。

 <div>
    <ReactPaginate
      previousLabel={'<'}
      nextLabel={'>'}
      breakClassName={'break-me'}
      pageCount={3}
      pageRangeDisplayed={3}
      onPageChange={(data) => onCahngePage(data)}
      containerClassName={'pagination'}
      activeClassName={'active'}
    />
  </div>

.pagination {
  display: flex;
  gap: 20px;
  margin: 0 auto;
  li {
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    white-space: nowrap;
    overflow: auto;
    a {
      position: absolute;
      left: 4px;
      font-size: 15px;
      background: white;
      outline-style: none;
      color: white;
    }
    animation: ripple 0.7s linear infinite;
    &.active {
      background: blue;
      color: blue;
      a {
        color: blue;
        background: blue;
        overflow: auto;
      }
    }
    @keyframes ripple {
      0% {
        box-shadow: 0 0 0 0 rgba(184, 226, 250, 0.733), 0 0 0 0.1em rgba(184, 226, 250, 0.733),
          0 0 0 0.2em rgba(184, 226, 250, 0.733), 0 0 0 0.3em rgba(184, 226, 250, 0.733);
      }
      100% {
        box-shadow: 0 0 0 0.1em rgba(184, 226, 250, 0.733), 0 0 0 0.2em rgba(184, 226, 250, 0.733),
          0 0 0 0.4em rgba(184, 226, 250, 0);
      }
    }
  }
  .previous {
    display: none;
  }
  .next {
    display: none;
  }
}

Answer 1

null