0
私はいくつかのdivを持っています。そのうち2つはページの右側のsidに、2つは左側にあります。 ChromeとFirefoxでは正しく表示されますが、EdgeやExplorerでページを開くとバグがあるようです。誰が私が何が起こっているのか把握するのを助けることができる？ HTML：Microsoft EdgeとInternet Explorerのcss floatの表示のバグ
.openday {
\t height: 1550px;
\t margin-top: 100px;
\t background-image: url(../Images/Open%20Day2.jpg);
\t background-repeat: no-repeat;
\t background-size: cover;
\t padding-top: 100px;
\t margin-bottom: 50px;
\t background-position: center;
}
.openday-content {
\t max-width: 1350px;
\t margin-left: auto;
\t margin-right: auto;
}
.find-us #mylightbox {
\t display: none !important;
}
.prices #mylightbox2 {
\t display: none !important;
}
.food-and-drink #mylightbox3 {
\t display: none !important;
}
.parking #mylightbox4 {
\t display: none !important;
}
.read-more {
\t background-image: -webkit-linear-gradient(0deg,rgba(210,196,245,0.50) 0%,rgba(73,34,140,1.00) 100%)!important;
\t background-image: -moz-linear-gradient(0deg,rgba(210,196,245,0.50) 0%,rgba(73,34,140,1.00) 100%)!important;
\t background-image: -o-linear-gradient(0deg,rgba(210,196,245,0.50) 0%,rgba(73,34,140,1.00) 100%)!important;
\t background-image: linear-gradient(90deg,rgba(210,196,245,0.50) 0%,rgba(73,34,140,1.00) 100%)!important;
\t background-color: rgba(0, 0, 0, 0.5);
\t padding: 25px 25px;
\t color: #FFFFFF !important;
\t text-align: center;
\t font-family: timeburner;
\t border-style: none;
\t font-size: 24px;
\t width: 200px;
\t margin-bottom: 15px;
\t margin-top: 140px;
}
.read-more:hover {
\t cursor: pointer;
}
.read-more:active {
\t width: 190px;
\t padding: 25px 22px;
}
.title {
\t color: #000000;
\t font-family: Hero;
\t font-size: 48px;
\t text-transform: uppercase;
\t margin-top: 40px;
}
.content {
\t background-color: rgba(255, 255, 255, 1);
\t max-height: 690px;
\t max-width: 480px;
}
.opendayimages {
\t width: 100%;
}
.find-us {
\t float: left;
\t text-align: center;
\t background-color: rgba(210,196,245,0.50);
\t padding: 10px;
\t margin-bottom: 75px;
}
.prices {
\t float: right;
\t text-align: center;
\t background-color: rgba(210,196,245,0.50);
\t padding: 10px;
\t margin-bottom: 75px;
}
.food-and-drink {
\t float: left;
\t text-align: center;
\t background-color: rgba(210,196,245,0.50);
\t padding: 10px;
}
.parking {
\t float: right;
\t text-align: center;
\t background-color: rgba(210,196,245,0.50);
\t padding: 10px;
}
hr {
\t width: 25%;
}
.text {
\t color: #878787;
\t font-family: timeburner;
}<div class="openday">
\t <div class="openday-content">
\t \t <div class="find-us">
\t \t \t <div class="content">
\t \t \t \t <img src="Images/find us.jpg" class="opendayimages">
\t \t \t \t <div class="title">Find us</div>
\t \t \t \t <br>
\t \t \t \t <hr>
\t \t \t \t <br>
\t \t \t \t <div class="text">Find out where we're located and get directions sent to your phone.</div>
\t \t \t \t <button class="read-more" href="#" data-featherlight="#mylightbox">Read more...</button>
\t \t \t \t <div id="mylightbox">
\t \t \t \t \t <iframe id="map"
\t \t \t \t \t src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBe2EsOqriL_MaqIhqQLtewp-1wthJC7K4&q=Waterbeach+Hyacinth&maptype=satellite"
\t \t \t \t \t height="500"
\t \t \t \t \t width="900">
\t \t \t \t \t </iframe>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="prices">
\t \t \t <div class="content">
\t \t \t \t <img src="Images/Prices.jpg" class="opendayimages">
\t \t \t \t <div class="title">Prices</div>
\t \t \t \t <br>
\t \t \t \t <hr>
\t \t \t \t <br>
\t \t \t \t <div class="text">Find out how much a ticket costs at our Open Day.</div>
\t \t \t \t <button class="read-more" href="#" data-featherlight="#mylightbox2">Read more...</button>
\t \t \t \t <div id="mylightbox2">This div will be opened in a lightbox</div>
\t \t \t </div> \t
\t \t </div>
\t \t <div class="food-and-drink">
\t \t \t <div class="content">
\t \t \t \t <img src="Images/Food and Drink.jpg" class="opendayimages">
\t \t \t \t <div class="title">Food and Drink</div>
\t \t \t \t <br>
\t \t \t \t <hr>
\t \t \t \t <br>
\t \t \t \t <div class="text">Find out what's available at the event and in the surrounding area.</div>
\t \t \t \t <button class="read-more" href="#" data-featherlight="#mylightbox3">Read more...</button>
\t \t \t \t <div id="mylightbox3">This div will be opened in a lightbox</div>
\t \t \t </div> \t
\t \t </div>
\t \t <div class="parking">
\t \t \t <div class="content">
\t \t \t \t <img src="Images/Parking.jpg" class="opendayimages">
\t \t \t \t <div class="title">Parking</div>
\t \t \t \t <br>
\t \t \t \t <hr>
\t \t \t \t <br>
\t \t \t \t <div class="text">Driving? Don't worry, we have you covered.</div>
\t \t \t \t <button class="read-more" href="#" data-featherlight="#mylightbox4">Read more...</button>
\t \t \t \t <div id="mylightbox4">This div will be opened in a lightbox</div>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
ハイパーリンクを使用してブラウザ間で一貫性を維持するには、参考用リンクhttps://meyerweb.com/eric/tools/css/reset/ –
ここに別のリンクhttps：//necolas.githubがあります。 io/normalize.css / –