파이어 폭스와 오페라의 테이블 대신 Flexbox

Question

우리 모두는 파이어 폭스와 오페라가 테이블을 다루는 것을 안다는 것을 알고 있습니다. 다음 코드와 CSS를 사용하면 Chrome과 Safari에 내 테이블이 완벽하게 표시됩니다. 파이어 폭스와 오페라의 경우 항목이 표시되는 행의 패딩이 거의 3 배가되어 4 개 항목의 오버플로가 발생했습니다. 테이블을 가볍게 두르는 것은 끔찍한 것처럼 보입니다.

HTML : 그래서

.photos { 
    width: 1600px; 
    margin-left: 5px; 
    padding: 5px; 
    position: relative; 
} 


.photos img { 
    width: 128px; 
    height: 194px; 
    margin-left: -25px; 
    padding: 5px; 
    position: relative; 
} 

, 나는 테이블 태그 하락 : CSS

<div class= 'span10'> 
<!-- <div class= 'span2'>-->     
    <div class='photos'> 
     <table cellspacing="0"> 
      <% @books.in_groups_of(9, false).shuffle.each do |books| %>       
       <tr> 
        <% for book in books.shuffle %> 
         <td> 
          <%= link_to image_tag(book.image_url, :class => 'book') %> 
          <% if current_user.try(:admin?) %>             
          <%= link_to 'Edit', edit_book_path(book) %> | 
          <%= link_to 'Destroy', video, method: :delete, data: { confirm: 'Are you sure?' } %> 
          <%= link_to 'New Book', new_book_path %> 
          <% else %> 
          <% end %> 
          <div class='hrline'><hr /></div> 
         </td> 
        <% end %> 
       </tr> 
        <% end %> 
     </table>      
    </div> 
    <!-- </div> --> 
</div> 

여기

<div class= 'span10'> 
<!-- <div class= 'span2'> -->     
    <div class='photos'> 
     <!-- <table cellspacing="0"> --> 
     <% @books.in_groups_of(9, false).shuffle.each do|books| %>       
       <!-- <tr> --> 
       <% for book in books.shuffle %> 
        <!-- <td> --> 
        <%= link_to image_tag(book.image_url, :class => 'book') %> 
         <% if current_user.try(:admin?) %>             
         <%= link_to 'Edit', edit_book_path(book) %> | 
         <%= link_to 'Destroy', video, method: :delete, data: { confirm: 'Are you sure?' } %> 
         <%= link_to 'New Book', new_book_path %> 
         <% else %> 
         <% end %> 
         <div class='hrline'><hr /></div> 
        <!-- </td> --> 
         <% end %> 
       <!-- </tr> --> 
     <% end %> 
    <!--</table>-->    
</div> 
<!--</div>--> 
</div> 

및 인기 인 flexbox를 사용하기로 결정하고 스타일링 I입니다 중고 :

.photos { 
    width: 1600px; 
    margin-left: 5px; 
    padding: 5px; 
    position: relative; 
    border-collapse:collapse; 
    display: -webkit-flex; 
    -webkit-flex-flow: column; 
    -webkit-flex-align-items: baseline; 
    -webkit-flex-direction: row; 
    display: flex; 
    flex-flow: column; 
    lex-align-items: baseline; 
    flex-pack: distribute; 
    flex-direction: row; 
} 

내가 읽은 것으로부터, 이것은 악몽을 끝낼 것이라고 흥분했습니다. 그러나 내 페이지를 새로 고치면 항목 (이 경우 책)은 4 개의 브라우저 모두에서 행당 하나의 항목을 표시합니다.

NB. 위의 코드의 변형으로 정렬되지 않은 목록을 사용했지만 도움이되지 않았습니다.

Answer 1

나는 마침내이 문제의 최하부에 닿았습니다. 내가 생각했던대로 CSS였습니다.

내 테이블을 유지하고 브라우저 보석 덕분에 https://github.com/fnando/browser에 파이어 폭스와 오페라, 그리고 크롬과 사파리에 특정 CSS를 제공 할 수 있었고 그 점이 아름답게 처리되었습니다. 여기에 내가 그것을 어떻게 있습니다 :

<% if browser.firefox? || browser.opera? %> 
    <div class='fire-photos'> //css for firefox and opera 
<% else %> 
    <div class='photos'> //css for chrome and safari 
<% end %> 
     <table> 
       <tr> 
        <td> 
        </td> 
       </tr> 
     </table> 
    </div>