html - Firefox および Opera のテーブルの代替としての Flexbox

Question

Firefox と Opera がテーブルの処理が苦手であることは誰もが知っています。次のコードと css を使用すると、私のテーブルは Chrome と Safari で完全に表示されます。Firefox と Opera では、アイテムが表示される行のパディングがほぼ 3 倍になり、4.5 個のアイテムがオーバーフローしました。控えめに言っても、テーブルはひどく見えます。

HTML:

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

CSS:

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


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

そこで、テーブル タグを削除しました。

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

人気のあるフレックスボックスを使用することにしました。使用したスタイリングは次のとおりです。

.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 つのブラウザすべてで項目 (この場合は本) が 1 行に 1 項目ずつ表示されました。

注意。上記のコードのバリエーションとして、順序付けられていないリストを使用しましたが、それは役に立たなかったようです。