게시판 리스트에서 가로이미지 설정 !!??

게시판에서 가로이미지 설정을 4 으로 했습니다만,

브라우져에 따라 다르게 나오네요 ...  방법이 있을까요 !!??

감사 합니다 !!!!!

아래, 크롬, microsoft Edge, 네이버웨일, 정상적으로 가로 4개로 나옴니다.

아래, Explorer 가로 6개로 나옵니다 ... ㅠㅠ

소스참조 : 

list.php

  <div class="list">        
        <?php
        for ($i=0; $i<count($list); $i++) {            
        
        $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);

        echo "<div class='book-cover'>";
        echo "<a href='". $list[$i]['href']. "'>";    
        if($thumb['src']) {
            $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
        } else {
            $img_content = '<span class="no_image">no image</span>';
        }
        echo $img_content;
        echo "</a></div>";
    } ?>
    </div>

style.css

.book {
  transition: opacity 0.4s 0.2s;
  perspective: 250vw;
}

.book .list{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 20px;
    /* justify-content: space-between; */
    background: rgba(0, 0, 0, 0) url("./img/wall-bookshelf.png") repeat-y 0px 0px padding-box border-box;  
      
}
.book .list .book-cover {    
    margin: 4px;
    flex: 0 1 calc(25% - 10px);    
    margin-bottom: 55px;
}

.book .page:nth-child(even) {
  clear: both;
}

.book .pages {
  /* width: 60vw; */
  width: 920px;
  /* height: 44vw; */
  height: 650px;
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border-radius: 4px;
  /*box-shadow: 0 0 0 1px #e3dfd8;*/
}
.book .page {

  float: none;
  clear: none;
  padding: 20px;  
  margin: 0;
  position: absolute;
  top: 0;
  /* width: 30vw; */
  width: 460px;
  /* height: 44vw; */
  height: 650px;
  transform-origin: 0 0;
  transition: transform 1.4s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  cursor: pointer;
  user-select: none;
  background-color: #f0f0f0;
}

.book .page pre {
    white-space: pre-wrap; 
    overflow: hidden;
    font-family: 'Nanum Myeongjo', serif;
    line-height: 180%;
}    

.book .page:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.7s;
  z-index: 2;
}
.book .page:nth-child(odd) {
    pointer-events: all;
    transform: rotateY(0deg);
    right: 0;
    border-radius: 0 4px 4px 0;
    background-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 10%);
  }
  .book .page:nth-child(odd):hover {
    transform: rotateY(-15deg);
  }
  .book .page:nth-child(odd):hover:before {
    background: rgba(0, 0, 0, 0.03);
  }
  .book .page:nth-child(odd):before {
    background: rgba(0, 0, 0, 0);
  }
  .book .page:nth-child(even) {
    pointer-events: none;
    transform: rotateY(180deg);
    transform-origin: 100% 0;
    left: 0;
    border-radius: 4px 0 0 4px;
    border-color: black;
    background-image: linear-gradient(to left, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 10%);
  }
  .book .page:nth-child(even):before {
    background: rgba(0, 0, 0, 0.2);
  }
  .book .page.grabbing {
    transition: none;
  }
  .book .page.flipped:nth-child(odd) {
    pointer-events: none;
    transform: rotateY(-180deg);
  }
  .book .page.flipped:nth-child(odd):before {
    background: rgba(0, 0, 0, 0.2);
  }
  .book .page.flipped:nth-child(even) {
    pointer-events: all;
    transform: rotateY(0deg);
  }
  .book .page.flipped:nth-child(even):hover {
    transform: rotateY(15deg);
  }
  .book .page.flipped:nth-child(even):hover:before {
    background: rgba(0, 0, 0, 0.03);
  }
  .book .page.flipped:nth-child(even):before {
    background: rgba(0, 0, 0, 0);
  }