那些遇到过的问题

Flex container won't expand to fit content in IE

mmo*_*tti 9 html css css3 flexbox internet-explorer-11

I'm having trouble with <div> heights in IE (specifically IE11). Works fine in Chrome.

So I'm essentially loading in processed PHP results with jQuery.html() and in IE my page wrap doesn't seem to fit the fill length of the page. I believe I've narrowed this down to:

<main id="place_results_wrap">
Run Code Online (Sandbox Code Playgroud)

The height of that seems to shrink as soon as the following section and contents within are loaded in with jQuery.html().

<section class="place_results">
Run Code Online (Sandbox Code Playgroud)

As part of the jQuery load, I'm using the following code which fixes the height in Chrome. I believe it's the html auto height that resolves it.

    $("html").css('height','auto');
    $("body, #page_wrap").css('min-height','100%');
Run Code Online (Sandbox Code Playgroud)

No joy in IE :(

Please could somebody give me a hand?

编辑:这似乎是相关flex: 1的place_results_wrap.如果我使用flex-grow: 1它似乎按预期扩展.有谁知道为什么会这样？有没有之间的差异显著flex:1和flex-grow:1？

小提琴

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Mic*_*l_B 23

IE11在flexbox方面存在很多问题.它肯定不适合flex: 1.

在您的代码中,您有:

#place_results_wrap {
    flex: 1;
    min-height: 6.25em;
}
Run Code Online (Sandbox Code Playgroud)

该flex速记计算到:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0%(在Chrome中)和flex-basis: 0px(在IE11中)

这些flex-basis值在IE11中失败.

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

  • 由于`flex:1`同时设置了'flex-grow`和`flex-shrink`,我的修复方法是`flex:1 1 auto;`.那样`grow`和`shrink`也正在相应地设定.否则,你的建议很精彩@michael_b! (2认同)

归档时间：

查看次数：

8740 次

最近记录：

7 年，11 月 前
flex属性在IE中不起作用 20
flexbox中的图像行为(嵌入列中的行) 7
更多相关链接
相关归档
动态更改网站图标 318
CSS,居中的div,缩小到适合？ 64
如何创建div来填充页眉和页脚div之间的所有空格 56
使用Jquery更改表单输入值 28
分别更改jquery-ui自动完成小部件的宽度 25
使用变换:缩放会导致模糊图像 22
IE8忽略td宽度,适用于IE7 21
哪些浏览器支持<embed>和<object>标签？ 20
我可以在伪选择器图像之前或之后放置边框半径吗？ 5
圈子有三种不同的边框颜色 5
难疑归档
如何检查jQuery中是否选中了复选框？ 4390
将本地存储库分支重置为远程存储库HEAD 3488
如何列出目录的所有文件？ 3474
在jQuery中添加表行 2331
如何逐行读取文件到列表中？ 2028
JavaScript检查变量是否存在(定义/初始化) 1642
如何使用逗号作为千位分隔符在JavaScript中打印数字 1589
"this"关键字如何运作？ 1243
如何使用AngularJS在浏览器控制台中访问$ scope变量？ 1220
JavaScript中是否有常量？ 1118