我有一些div，其中2个我想要在页面的右侧sid上，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>
答案 0 :(得分：0)
字体大小未设置且Edge正在渲染字体稍大，使其扩展div。设置字体大小可以解决问题。