html - Microsoft Edge 和 Internet Explorer css float 显示错误

Question

我有一些 div，其中 2 个我想放在页面的右侧，另外 2 个在左侧。它们在 Chrome 和 Firefox 中显示正常，但当我在 Edge 或 Explorer 中打开页面时似乎存在错误。谁能帮我弄清楚发生了什么事？ HTML:

.openday {
	height: 1550px;
	margin-top: 100px;
	background-image: url(../Images/Open%20Day2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 100px;
	margin-bottom: 50px;
	background-position: center;
}
.openday-content {
	max-width: 1350px;
	margin-left: auto;
	margin-right: auto;
}
.find-us #mylightbox {
	display: none !important;
}
.prices #mylightbox2 {
	display: none !important;
}
.food-and-drink #mylightbox3 {
	display: none !important;
}
.parking #mylightbox4 {
	display: none !important;
}
.read-more {
	background-image: -webkit-linear-gradient(0deg,rgba(210,196,245,0.50) 0%,rgba(73,34,140,1.00) 100%)!important;
	background-image: -moz-linear-gradient(0deg,rgba(210,196,245,0.50) 0%,rgba(73,34,140,1.00) 100%)!important;
	background-image: -o-linear-gradient(0deg,rgba(210,196,245,0.50) 0%,rgba(73,34,140,1.00) 100%)!important;
	background-image: linear-gradient(90deg,rgba(210,196,245,0.50) 0%,rgba(73,34,140,1.00) 100%)!important;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 25px 25px;
	color: #FFFFFF !important;
	text-align: center;
	font-family: timeburner;
	border-style: none;
	font-size: 24px;
	width: 200px;
	margin-bottom: 15px;
	margin-top: 140px;
}
.read-more:hover {
	cursor: pointer;
}
.read-more:active {
	width: 190px;
	padding: 25px 22px;
}
.title {
	color: #000000;
	font-family: Hero;
	font-size: 48px;
	text-transform: uppercase;
	margin-top: 40px;
}
.content {
	background-color: rgba(255, 255, 255, 1);
	max-height: 690px;
	max-width: 480px;
}
.opendayimages {
	width: 100%;
}
.find-us {
	float: left;
	text-align: center;
	background-color: rgba(210,196,245,0.50);
	padding: 10px;
	margin-bottom: 75px;
}
.prices {
	float: right;
	text-align: center;
	background-color: rgba(210,196,245,0.50);
	padding: 10px;
	margin-bottom: 75px;
}
.food-and-drink {
	float: left;
	text-align: center;
	background-color: rgba(210,196,245,0.50);
	padding: 10px;
}
.parking {
	float: right;
	text-align: center;
	background-color: rgba(210,196,245,0.50);
	padding: 10px;
}
hr {
	width: 25%;
}
.text {
	color: #878787;
	font-family: timeburner;
}

<div class="openday">
	<div class="openday-content">
		<div class="find-us">
			<div class="content">
				<img src="Images/find us.jpg" class="opendayimages">
				<div class="title">Find us</div>
				<br>
				<hr>
				<br>
				<div class="text">Find out where we're located and get directions sent to your phone.</div>
				<button class="read-more" href="#" data-featherlight="#mylightbox">Read more...</button>
				<div id="mylightbox">
					<iframe id="map"
					src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBe2EsOqriL_MaqIhqQLtewp-1wthJC7K4&q=Waterbeach+Hyacinth&maptype=satellite"
					height="500"
					width="900">
					</iframe>
				</div>
			</div>
		</div>
		<div class="prices">
			<div class="content">
				<img src="Images/Prices.jpg" class="opendayimages">
				<div class="title">Prices</div>
				<br>
				<hr>
				<br>
				<div class="text">Find out how much a ticket costs at our Open Day.</div>
				<button class="read-more" href="#" data-featherlight="#mylightbox2">Read more...</button>
				<div id="mylightbox2">This div will be opened in a lightbox</div>
			</div>	
		</div>
		<div class="food-and-drink">
			<div class="content">
				<img src="Images/Food and Drink.jpg" class="opendayimages">
				<div class="title">Food and Drink</div>
				<br>
				<hr>
				<br>
				<div class="text">Find out what's available at the event and in the surrounding area.</div>
				<button class="read-more" href="#" data-featherlight="#mylightbox3">Read more...</button>
				<div id="mylightbox3">This div will be opened in a lightbox</div>
			</div>	
		</div>
		<div class="parking">
			<div class="content">
				<img src="Images/Parking.jpg" class="opendayimages">
				<div class="title">Parking</div>
				<br>
				<hr>
				<br>
				<div class="text">Driving? Don't worry, we have you covered.</div>
				<button class="read-more" href="#" data-featherlight="#mylightbox4">Read more...</button>
				<div id="mylightbox4">This div will be opened in a lightbox</div>
			</div>
		</div>
	</div>
</div>

Chrome : https://flic.kr/p/UotyH6 边缘: https://flic.kr/p/Vqu2yi

Answer 1

未设置字体大小，Edge 将字体渲染得稍微大一点，从而扩大了 div。设置字体大小解决了这个问题。