Strangeness

markup.html

<header>
<!-- the dimensions of this div will be 220 x 77px -->
  <div class="logo-normal">
    <a href="#">
      <img src="logo.png" />
    </a>
  </div>
  
  <!-- the dimensions of this div will be 220 x 82px -->
  <div class="logo-werid">
    <a href="#">
      <img src="logo.png" />
    </a>
  </div>
</header>

strange.less

.logo-normal {
  width: 220px;
  margin-left: 20px;
  display: block;
  float: left;
  .img {
    max-width: 100%;
    min-width: auto\9;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }
}

.logo-weird {
  width: 220px;
  margin-left: 20px;
  display: block;
  float: left;
  img {
    max-width: 100%;
    min-width: auto\9;
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle; // this line causes strange stuff
  }
}