html – Flex容器不会扩展以适应IE中的内容

栏目: Html · 发布时间: 5个月前

来源: codeday.me

本文转载自:https://codeday.me/bug/20190113/521084.html,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

参见英文答案 > flex property not working in IE 5个

>             Image behavior within flexbox (rows embedded in columns) 2个

我遇到了<

div>的问题IE中的高度(特别是IE11).适用于Chrome.

所以我基本上用jQuery.html()加载处理过的 PHP 结果,而在IE中我的页面换行似乎不适合页面的填充长度.我相信我已将其缩小到:

<main id="place_results_wrap">

只要使用jQuery.html()加载以下部分和内容,它的高度似乎就会缩小.

<section class="place_results">

作为 jQuery 加载的一部分,我使用以下代码修复Chrome中的高度.我相信这是解决它的 html 自动高度.

$("html").css('height','auto');
    $("body, #page_wrap").css('min-height','100%');

IE中没有欢乐:(

请有人帮我一个忙吗?

编辑:这似乎与place_results_wrap上的flex:1有关.如果我使用flex-grow:1而不是它似乎按预期扩展.有谁知道为什么会这样? flex:1和flex-grow:1之间是否存在显着差异?

Fiddle

a,
a:hover {
  text-decoration: none;
}
html,
body {
  height: 100%;
}
body {
  font-family: 'Open Sans', sans-serif;
  background: #fff;
  font-size: 16px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
#page_wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  background: #fff;
  text-align: center;
  padding: 1.250em;
}
@media screen and (min-width: 900px) {
  #content {
    min-height: 15.05em;
  }
}
header h1 {
  font-size: 6em;
  font-weight: 400;
  color: #655e5e;
  margin: 0;
  display: inline-block;
}
@media screen and (min-width: 605px) and (max-width: 900px) {
  header h1 {
    font-size: 3.5em;
  }
}
@media screen and (min-width: 340px) and (max-width: 605px) {
  header h1 {
    font-size: 3em;
  }
}
@media screen and (max-width: 340px) {
  header h1 {
    font-size: 2em;
  }
}
header hr {
  max-width: 36em;
  margin-bottom: 0px;
}
header .fa-map-marker {
  color: #ec3b3b;
  font-size: 1.2em;
}
#refinement {
  padding: 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin: 0.625em;
}
#refinement form {
  display: flex;
  justify-content: center;
}
.form_component {
  margin: 0 0.4em;
  display: none;
}
.form_component i.fa {
  font-size: 1.4em;
  color: #655e5e;
}
main {
  background: #eaeaea;
}
#content {
  text-align: center;
  background: #655e5e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 19.8em;
}
@media screen and (max-width: 900px) {
  #content {
    display: none;
  }
}
#content h2 {
  color: #fff;
  font-weight: 400;
  font-size: 3em;
  margin: 0;
}
@media screen and (max-width: 415px) {
  #content h2 {
    font-size: 2em;
  }
}
#content i.fa-globe {
  font-size: 14em;
  color: #fff;
}
@media screen and (max-width: 415px) {
  #content i.fa-globe {
    font-size: 10em;
  }
}
#place_results_wrap {
  flex: 1;
  min-height: 6.25em;
}
#place_results_wrap section h3 {
  font-weight: 400;
}
#place_results_wrap h3.placeholder {
  text-align: center;
}
.place_results {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.25em 0;
}
.next_page {
  padding: 0 1.250em;
  width: 100%;
  text-align: center;
}
.next_page button {
  background-color: #fff;
  border: none;
  color: #655e5e;
  padding: 0.3125em 2em;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  border-radius: 1.25em;
}
.next_page button:hover {
  background-color: #f6f6f6;
}
.place {
  width: 24em;
  height: 27em;
  margin: 1.25em;
  display: flex;
  flex-direction: column;
  -webkit-box-shadow: 5px 6px 20px 0px rgba(158, 155, 158, 0.75);
  -moz-box-shadow: 5px 6px 20px 0px rgba(158, 155, 158, 0.75);
  box-shadow: 5px 6px 20px 0px rgba(158, 155, 158, 0.75);
  background: #fff;
}
@media screen and (max-width: 1920px) {
  .place {
    width: 30%;
  }
}
@media screen and (min-width: 900px) and (max-width: 1366px) {
  .place {
    width: 45%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1366px) {
  .place {
    width: 44%;
  }
}
@media screen and (min-width: 415px) and (max-width: 760px) {
  .place {
    width: 90%;
  }
}
@media screen and (max-width: 415px) {
  .place {
    width: 90%;
  }
}
.place_image {
  width: 100%;
  height: 14.0625em;
  background-size: cover !important;
  background-clip: content-box !important;
}
.place_description {
  padding: 0.625em;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  background: #fff;
}
.distance_container p.distance {
  font-weight: 600;
}
.place_description p,
.place_description a {
  color: #655e5e;
  font-weight: 400;
  margin: 0;
}
.place_description .place_open p {
  margin: 0;
  color: #49b51c;
}
.place_description i.fa {
  width: 1.25em;
}
.place_title {
  flex: 1 1 0;
}
.place_title h3 {
  color: #655e5e;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  font-size: 1.4em;
  line-height: 1.3;
}
@media screen and (max-width: 415px) {
  .place_title h3 {
    font-size: 1.2em;
  }
}
.rating_container {
  width: 100%;
}
.rating_bar {
  width: 6.875em;
  height: 1.313em;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
  background-repeat: repeat-x;
  background-position: 0 0;
}
.rating {
  height: 1.313em;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
  background-position: 0 100%;
  background-repeat: repeat-x;
}
.place_description .place_location {
  margin-bottom: 0.625em;
}
.place .distance_container,
.place .vicinity_container,
.place .place_phone_container {
  display: flex;
}
#load_container {
  padding: 1.25em 0.625em;
  text-align: center;
}
#load i.fa-spin {
  font-size: 4em;
  color: #655e5e;
}
#jquery_placeholder {
  display: none;
  width: 100%;
}
footer {
  padding: 1.25em;
  text-align: right;
  background: #eaeaea;
  min-height: 3.9em;
}
img#google {
  width: 10em;
}
#error {
  padding: 1.25em;
  background: #ec3b3b;
}
#error p {
  font-size: 1.2em;
  margin: 0;
  color: #fff;
  text-align: center;
}
#error i.fa-exclamation-circle {
  color: #fff;
}
<body style="min-height: 100%;">
  <div id="page_wrap" style="min-height: 100%;">
    <header>
      <a href="/"><h1>Close<span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Range</h1></a>
      <hr>
      <section id="refinement">
        <form>
          <section class="form_component" style="display: block;">
            <select id="narrow">
              <option value="select" selected="" disabled="">Please Select</option>
              <option value="lodging">Accommodation</option>
              <option value="accounting">Accountants</option>
              <option value="aquarium">Aquarium</option>
              <option value="art_gallery">Art Gallery</option>
              <option value="atm">Cash Machine</option>
              <option value="bakery">Bakery</option>
              <option value="bank">Bank</option>
              <option value="bar">Bar</option>
              <option value="beauty_salon">Beauty Salon</option>
              <option value="book_store">Book Store</option>
              <option value="bowling_alley">Bowling Alley</option>
              <option value="bus_station">Bus Station</option>
              <option value="cafe">Cafe</option>
              <option value="campground">Campsite</option>
              <option value="car_dealer">Car Dealer</option>
              <option value="car_rental">Car Rental</option>
              <option value="car_repair">Car Repair</option>
              <option value="car_wash">Car Wash</option>
              <option value="church">Church</option>
              <option value="city_hall">Town Hall</option>
              <option value="clothing_store">Clothes Store</option>
              <option value="convenience_store">Convenience Store</option>
              <option value="dentist">Dentist</option>
              <option value="department_store">Department Store</option>
              <option value="doctor">Doctor</option>
              <option value="electrician">Electrician</option>
              <option value="electronics_store">Electronics Store</option>
              <option value="florist">Florist</option>
              <option value="furniture_store">Furniture Store</option>
              <option value="gym">Gym</option>
              <option value="hair_care">Hairdressers</option>
              <option value="hardware_store">Hardware Store</option>
              <option value="home_goods_store">Home Goods Store</option>
              <option value="hospital">Hospital</option>
              <option value="jewelry_store">Jewelry Store</option>
              <option value="laundry">Laundry</option>
              <option value="lawyer">Lawyer</option>
              <option value="library">Library</option>
              <option value="locksmith">Locksmith</option>
              <option value="meal_delivery">Takeaway (Delivery)</option>
              <option value="meal_takeaway">Takeaway (Collection)</option>
              <option value="movie_theater">Cinema</option>
              <option value="moving_company">Moving Company</option>
              <option value="museum">Museum</option>
              <option value="night_club">Night Club</option>
              <option value="painter">Painter</option>
              <option value="park">Park</option>
              <option value="parking">Parking</option>
              <option value="pet_store">Pet Store</option>
              <option value="gas_station">Petrol Station</option>
              <option value="pharmacy">Pharmacy</option>
              <option value="plumber">Plumber</option>
              <option value="post_office">Post Office</option>
              <option value="real_estate_agency">Estate Agent</option>
              <option value="restaurant">Restaurant</option>
              <option value="roofing_contractor">Roofing Contractor</option>
              <option value="rv_park">Caravan Park</option>
              <option value="school">School</option>
              <option value="shoe_store">Shoe Store</option>
              <option value="shopping_mall">Shopping Mall</option>
              <option value="spa">Spa</option>
              <option value="storage">Storage</option>
              <option value="store">Store</option>
              <option value="taxi_stand">Taxi Stand</option>
              <option value="train_station">Train Station</option>
              <option value="transit_station">Transit Station</option>
              <option value="travel_agency">Travel Agency</option>
              <option value="university">University</option>
              <option value="veterinary_care">Veterinary Care</option>
              <option value="zoo">Zoo</option>
            </select>
          </section>
          <section class="form_component" style="display: block;">
            <input id="driving" type="radio" name="travelmode" value="Driving" checked=""> <i class="fa fa-car" aria-hidden="true"></i>
          </section>
          <section class="form_component" style="display: block;">
            <input id="walking" type="radio" name="travelmode" value="Walking"> <i class="fa fa-male" aria-hidden="true"></i>
          </section>
        </form>
      </section>
    </header>

    <section id="content">
      <h2>Let's explore!</h2>
      <i class="fa fa-globe" aria-hidden="true"></i>
    </section>

    <main id="place_results_wrap">
      <section class="place_results">



        <section class="place">

          <section class="place_image" style="background: url(/assets/i/placeholder.jpg) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 1</h3>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-TRRLZqMrJzg/VNDfOiV8fRI/AAAAAAAAAA4/OIKniPQOWVg1yYV75qMx63VMzzvS8MKaA/s1600-w400/) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 2</h3>
            </section>
            <section class="place_location">



              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-H17v8cnJ1Go/V4xy3Km4nRI/AAAAAAAAAFc/BkMyDnQkir4cVXdBiQAS_NZ-PqEmLhDcQCLIB/s1600-w400/) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 3</h3>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(/assets/i/placeholder.jpg) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 4</h3>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(/assets/i/placeholder.jpg) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 5</h3>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-dgMNP6i8md0/VhofnGwXmZI/AAAAAAAAAHE/mr2kDL_U8uIYbGy5d_siC1vwiNExTLieA/s1600-w400/) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 6</h3>
              <section class="place_open">

              </section>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>
      </section>
    </main>

    <footer class="footer">
      <img id="google" src="/assets/i/google.png" alt="Powered by Google">
    </footer>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/assets/js/main.js"></script>
    <script src="/assets/js/geo.js"></script>
  </div>

IE11在flexbox方面存在很多问题.它当然不适用于flex:1.

在您的代码中,您有:

#place_results_wrap {
    flex: 1;
    min-height: 6.25em;
}

flex速记计算到:

> flex-grow:1

> flex-shrink:1

> flex-basis:0%(在Chrome中)和flex-basis:0px(在IE11中)

这些弹性基础值在IE11中失败.

而不是flex:1,尝试使用flex-basis:auto.

翻译自:https://stackoverflow.com/questions/39192995/flex-container-wont-expand-to-fit-content-in-ie


以上所述就是小编给大家介绍的《html – Flex容器不会扩展以适应IE中的内容》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

内容算法

内容算法

闫泽华 / 中信出版社 / 2018-4-30 / 58.00元

近两年来,伴随着BAT纷纷涌入自媒体平台,自媒体发展可谓迎来爆发。自媒体平台火爆起来是从今日头条异军突起而引发的。它是一款基于数据挖掘的推荐引擎产品,为用户推荐有价值的、个性化的信息,是国内移动互联网领域成长最快的产品服务之一。推荐引擎也将迎来高速发展,针对推荐引擎的优化技术也将会迎来新的机遇。 本书作者从事推荐引擎相关的内容分发相关工作,在书中对内容推荐系统进行了介绍,书的最后,介绍了自媒......一起来看看 《内容算法》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具