0
我有CSS来制作像交错卡片这样的列表项，但它只能在Firefox浏览器中使用，在大屏幕上的另一个浏览器中它只显示一列，而不是两列。我如何适应Chrome，IE，Safari浏览器？如何使Chrome适用于Chrome，IE，Safari？
ul.page_card_grid {
\t margin: 16px 0 16px 0;
\t padding: 0;
\t text-align: center;
}
ul.page_card_grid li {
\t display: block;
\t clear: both;
}
ul.page_card_grid li a {
\t display: block;
\t color: #999;
\t width: 80%;
\t margin: 16px auto 16px auto;
\t padding: 20px 16px 16px 16px;
\t font-size: 16px;
\t text-decoration: none;
\t background-color: #fff;
\t box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
\t overflow:hidden;
\t -webkit-tap-highlight-color: rgba(0,0,0,0);
}
ul.page_card_grid li a p {
\t margin: 8px 0 8px 0;
\t color:#555;
\t font-size: 20px;
\t text-align: center;
}
ul.page_card_grid li a img {
\t margin: 0 auto 0 auto;
}
ul.page_card_grid li a:hover, ul.page_card_grid li a:focus, ul.page_card_grid li a:active {
\t box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
\t background-color: #eee;
}
@media screen and (min-width: 640px) {
\t ul.page_card_grid {
\t \t margin: 16px 0 16px 0;
\t \t padding: 0;
\t \t display: flex;
\t \t -webkit-display: flex;
\t \t flex-flow: column wrap;
\t \t -webkit-flex-flow: column wrap;
\t }
\t ul.page_card_grid > :nth-child(2n + 1) {
\t \t order: 1;
\t \t -webkit-order: 1;
\t } /* 1st column */
\t ul.page_card_grid > :nth-child(2n + 2) {
\t \t order: 2;
\t \t -webkit-order: 2;
\t } /* 2nd column */
\t ul.page_card_grid > :nth-child(-n + 2) {
\t \t page-break-before: always; /* CSS 2.1 syntax */
\t \t -webkit-page-break-before: always;
\t \t break-before: always; /* New syntax */
\t \t -webkit-break-before: always;
\t }
\t ul.page_card_grid li {
\t \t display: flex;
\t \t -webkit-display: flex;
\t \t justify-content: center;
\t \t -webkit-justify-content: center;
\t \t align-items: center;
\t \t -webkit-align-items: center;
\t }
\t ul.page_card_grid li a {
\t \t display: block;
\t \t -webkit-display: block;
\t \t width: 240px;
\t \t margin: 16px;
\t \t padding: 20px 16px 16px 16px;
\t \t font-size: 16px;
\t }
\t ul.page_card_grid li a:hover, ul.page_card_grid li a:focus, ul.page_card_grid li a:active {
\t \t background-color: #fff;
\t }
}<ul class="page_card_grid">
\t <li>
\t \t <a href="http://local/index.php/sample-page/and-one-yet/">
\t \t \t <p>And one yet</p>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://local/index.php/sample-page/child-page-1/">
\t \t \t <img width="96" height="96" src="http://local/wp-content/uploads/2016/05/ic-1-150x150.png" class="attachment-96x96 size-96x96" alt="ic" srcset="http://local/wp-content/uploads/2016/05/ic-1-150x150.png 150w, http://local/wp-content/uploads/2016/05/ic-1.png 256w" sizes="(max-width: 96px) 100vw, 96px" />
\t \t \t <p>Child page 1</p>
\t \t \t Are you a student? Our app helps you to always know your schedule.
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://local/index.php/sample-page/child-page-2/">
\t \t \t <p>Child page 2</p>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="http://local/index.php/sample-page/one-yet-page/">
\t \t \t <p>One yet page</p>
\t \t </a>
\t </li>
</ul>
'float：top' does not exist ... – Johannes
是的，谢谢，我删除它。但我的问题在另一个。 –
问题似乎是浏览器对'page-break-before'属性的支持不稳定。在Firefox中运行（按预期），但不在Chrome中运行。 http://caniuse.com/#search=page-break-before –