Question

我有CSS制作列表项，如交错卡，但它仅适用于Firefox浏览器，在大屏幕上的另一个浏览器中，它只显示一列而不是两列。如何使其适用于Chrome，IE，Safari浏览器？

＆＃13;

ul.page_card_grid {
	margin: 16px 0 16px 0;
	padding: 0;
	text-align: center;
}

ul.page_card_grid li {
	display: block;
	clear: both;
}

ul.page_card_grid li a {
	display: block;
	color: #999;
	width: 80%;
	margin: 16px auto 16px auto;
	padding: 20px 16px 16px 16px;
	font-size: 16px;
	text-decoration: none;
	background-color: #fff;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
	overflow:hidden;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

ul.page_card_grid li a p {
	margin: 8px 0 8px 0;
	color:#555;
	font-size: 20px;
	text-align: center;
}

ul.page_card_grid li a img {
	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 {
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
	background-color: #eee;
}

@media screen and (min-width: 640px) {

	ul.page_card_grid {
		margin: 16px 0 16px 0;
		padding: 0;
		display: flex;
		-webkit-display: flex;
		flex-flow: column wrap;
		-webkit-flex-flow: column wrap;
	}

	ul.page_card_grid > :nth-child(2n + 1) { 
		order: 1;
		-webkit-order: 1;
	} /* 1st column */

	ul.page_card_grid > :nth-child(2n + 2) { 
		order: 2;
		-webkit-order: 2;
	} /* 2nd column */

	ul.page_card_grid > :nth-child(-n + 2) {
  		page-break-before: always; /* CSS 2.1 syntax */
		-webkit-page-break-before: always;
  		break-before: always;  /* New syntax */
		-webkit-break-before: always;
	}

	ul.page_card_grid li {
		display: flex;
		-webkit-display: flex;
  		justify-content: center;
		-webkit-justify-content: center;
  		align-items: center;
		-webkit-align-items: center;
	}

	ul.page_card_grid li a {
		display: block;
		-webkit-display: block;
		width: 240px;
		margin: 16px;
		padding: 20px 16px 16px 16px;
		font-size: 16px;
	}

	ul.page_card_grid li a:hover, ul.page_card_grid li a:focus, ul.page_card_grid li a:active {
		background-color: #fff;
	}
}

＆＃13;

<ul class="page_card_grid">
	<li>
		<a href="http://local/index.php/sample-page/and-one-yet/">
			<p>And one yet</p>
		</a>
	</li>
	<li>
		<a href="http://local/index.php/sample-page/child-page-1/">
			<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" />
			<p>Child page 1</p>
			Are you a student? Our app helps you to always know your schedule.
		</a>
	</li>
	<li>
		<a href="http://local/index.php/sample-page/child-page-2/">
			<p>Child page 2</p>
		</a>
	</li>
	<li>
		<a href="http://local/index.php/sample-page/one-yet-page/">
			<p>One yet page</p>
		</a>
	</li>
</ul>

＆＃13;

Answer 1

您可以为每个浏览器添加以下内容。

适用于Chrome和Safari

-webkit-tap-highlight-color: rgba(0,0,0,0);

适用于IE

-ms-tap-highlight-color: rgba(0,0,0,0);

对于Opera

-o-tap-highlight-color: rgba(0,0,0,0);

对于Mozila

-moz-tap-highlight-color: rgba(0,0,0,0);

希望它会有所帮助。

如何使这个CSS适用于Chrome，IE，Safari？

1 个答案: