Кроссбраузерность HTML

#main-blocks { padding-top: 70px; } 
#main-blocks h1 { text-align: center; font-weight: bold; font-size: 60px; } 
#main-blocks .main-blocks-container { padding-top: 30px; padding-bottom: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 70%; margin: 0 auto; text-align: center; } 
#main-blocks .main-blocks-container .main-block { margin: 0 20px 0 20px; background-color: #f2f2f2; padding-bottom: 20px; border: 2px solid #d9d9d9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 
#main-blocks .main-blocks-container .main-block h2 { font-size: 20px; } 
#main-blocks .main-blocks-container .main-block img { width: 100%; } 
#main-blocks .main-blocks-container .main-block p { font-size: 15px; } 
#main-blocks .main-blocks-container .main-block button { display: none; position: absolute; z-index: 10; padding: 0 auto; border: none; background-color: #FFC312; color: #1e272e; padding: 5px 10px 5px 10px; -webkit-transition: 1s; transition: 1s; cursor: pointer; } 
#main-blocks .main-blocks-container .main-block button:hover { color: #f2f2f2; background-color: #1e272e; } 
#main-blocks .main-blocks-container .main-block:hover { border: 2px solid #FFC312; } 
#main-blocks .main-blocks-container .main-block:hover button { display: block; }

<section id="main-blocks"> 
		<h1>Мероприятия</h1> 
		<div class="main-blocks-container"> 
			<div class="main-block"> 
				<button>Подробнее</button> 
				<img src="img/blocks/1.png" alt="Фото"> 
				<h2>Мероприятие</h2> 
				<p>Краткое описание мероприятия</p> 
			</div> 
			<!-- /.main-block --> 
			<div class="main-block"> 
				<button>Подробнее</button> 
				<img src="img/blocks/1.png" alt="Фото"> 
				<h2>Мероприятие</h2> 
				<p>Краткое описание мероприятия</p> 
			</div> 
			<!-- /.main-block --> 
			<div class="main-block"> 
				<button>Подробнее</button> 
				<img src="img/blocks/1.png" alt="Фото"> 
				<h2>Мероприятие</h2> 
				<p>Краткое описание мероприятия</p> 
			</div> 
			<!-- /.main-block --> 
			<div class="main-block"> 
				<button>Подробнее</button> 
				<img src="img/blocks/1.png" alt="Фото"> 
				<h2>Мероприятие</h2> 
				<p>Краткое описание мероприятия</p> 
			</div> 
			<!-- /.main-block --> 
		</div> 
		<!-- /.main-blocks-container --> 
	</section> 
	<!-- /#main-blocks -->