Question

我在bootstrap v4中使用flexbox有一个简单的图标列。它很好，但如果你点击一个图标，位置会略有变化。似乎只发生在chrome中。这是一个小提琴：

https://jsfiddle.net/lenb/shr8bk89/10/
` HTML：

<body>


    <div id='no'>

      <div id='minus' class="icon" title="Not special.">
        <a href="#" id="nHeart">
          <img class="img icon" src="http://gps-photo.org/images/Not.svg" />
        </a>
      </div>

      <div id='plus' class="icon" title="Loving it!">
        <a href="#" id="heart1">
          <img class="img" src="http://gps-photo.org/images/red-304570-1.svg" />
        </a>
      </div>

      <div id='comment-button-div' class="icon" title="Click for comments">
        <a class="comment-page" data-toggle="modal">
          <img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg" />
        </a>
      </div>

      <div id='info-div1' class="icon" title='Information'>
        <a class="info-page" data-toggle="modal">
          <img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg" />
        </a>
      </div>

    </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>

CSS：

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 


   #removal {
     border-color: black;
     border-top: 10rem;
   }

   html,
   body {
     width: 100%;
     height: 100%;
   }



   #no {
     padding: 1rem;
     display: flex;
     display: -webkit-flex;
     flex-wrap: nowrap;
     -webkit-flex-wrap: nowrap;
     justify-content: space-between;
     -webkit-justify-content: space-between;
     align-items: center;
     -webkit-align-items: center;
     align-content: space-between;
     -webkit-align-content: space-between;
     flex: 1 1 auto;
     -webkit-flex: 1 1 auto;
   }

   .icon {
     margin: auto;
     flex-grow: 1;
     flex-basis: auto;
   }


   /* // next is for images */
   .img {
     width: 8vmin;
   }

 /*   // stuff living in #no */
   #info-div1 {
     order: 3;
     -webkit-order: 3;
   }

   #minus {
     order: 0;
     -webkit-order: 0;
   }

   #plus {
     order: 1;
     -webkit-order: 1;
   }

   #comment-button-div {
     order: 2;
     -webkit-order: 2;
   }


     #no {
       flex-direction: column;
       -webkit-flex-direction: column;
       height: 100%;
       max-width: 10rem;
       order: 0;
       -webkit-order: 0;
     }

我认为没有理由改变定位。

有人可以告诉我出了什么问题。

Answer 1

使用normalize.css作为第一个加载有助于标准化Chrome的垂直对齐

在bootstrap v4中的图标列

1 个答案: