html - Flexbox替代Firefox和Opera上的表

我们都知道Firefox和Opera会处理表。使用以下代码和CSS，我的表格可以在Chrome和Safari上完美显示。在Firefox和Opera上，显示项目的行中的填充几乎增加了两倍，从而导致4个半项目的溢出。温和地说，桌子看起来糟透了。

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>

并决定使用流行的flexbox，这是我使用的样式：

.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种浏览器上每行显示一项。

注意我使用无序列表作为上述代码的一种变体，但这似乎无济于事。

最佳答案

我终于找到了这个问题的根源：这就是我一直以来所认为的css。

因此，我保留了自己的桌子，并借助浏览器gem的位置：https://github.com/fnando/browser，可以将某些CSS分别提供给Firefox和Opera，将另一CSS提供给Chrome和Safari，并对其进行了精美的处理。这是我的做法：

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

关于html - Flexbox替代Firefox和Opera上的表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17574906/