我们都知道 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;
}
所以,我删除了 table 标签:
<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 个浏览器上每行显示一个项目。
注意。我使用无序列表作为上述代码的变体,但这似乎没有帮助。