Microsoft Edge 和 Internet Explorer css 浮动显示错误

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。设置字体大小解决了这个问题。

Microsoft Edge 和 Internet Explorer css 浮动显示错误

Microsoft Edge and Internet Explorer css float display bug

html

css

internet-explorer

microsoft-edge