html - How to adapt this CSS for Chrome, IE, Safari? -

i have css make list items staggered cards works in firefox browser, in browser on large screens shows 1 column instead two. how can adapt chrome, ie, safari browsers?

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 {  	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 p {  	margin: 8px 0 8px 0;  	color:#555;  	font-size: 20px;  	text-align: center;  }    ul.page_card_grid li 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 , (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 {  		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;  	}  }

<ul class="page_card_grid">  	<li>  		<a href="http://local/index.php/sample-page/and-one-yet/">  			<p>and 1 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 student? our app helps know 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>

you can add following every browser.

for chrome , safari

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

for ie

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

for opera

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

for mozila

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

hope help.