fix(list): fix compatibility with IE11

* Added a mixin / workaround for the flexbox bug for Internet Explorer 11.
* Add ng-click to first list to show hover effects.

Fixes #7557. Closes #7573

Author: devversion

src/components/list/demoBasicUsage/index.html

@@ -10,8 +10,8 @@
 
     <md-content>
       <md-list flex>
-        <md-subheader class="md-no-sticky">3 line item</md-subheader>
-        <md-list-item class="md-3-line" ng-repeat="item in todos">
+        <md-subheader class="md-no-sticky">3 line item (with hover)</md-subheader>
+        <md-list-item class="md-3-line" ng-repeat="item in todos" ng-click="null">
           <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
           <div class="md-list-item-text" layout="column">
             <h3>{{ item.who }}</h3>
@@ -83,7 +83,7 @@ <h3> {{ phone.number }} </h3>
     <md-content>
 
       <md-list class="md-dense" flex>
-        <md-subheader class="md-no-sticky">3 line item</md-subheader>
+        <md-subheader class="md-no-sticky">3 line item (dense)</md-subheader>
         <md-list-item class="md-3-line" ng-repeat="item in todos">
           <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
           <div class="md-list-item-text" layout="column">

src/components/list/list.scss

@@ -37,6 +37,20 @@ $list-item-dense-header-font-size: 1.3rem !default;
 $list-item-dense-font-size: 1.2rem !default;
 $list-item-dense-line-height: 1.25rem !default;
 
+// This is a mixin, which fixes IE11's vertical alignment issue, when using `min-height`.
+// This mixin isn't that much generic to be used in other cases.
+// It can be only used for the list-item's button container.
+// See https://connect.microsoft.com/IE/feedback/details/816293/
+@mixin ie11-min-height-flexbug($min-height) {
+  div.md-button:first-child {
+    &::before {
+      content: '';
+      min-height: $min-height;
+      visibility: hidden;
+    }
+  }
+}
+
 md-list {
   display: block;
   padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
@@ -101,6 +115,8 @@ md-list {
         &, & > ._md-no-style {
           min-height: $list-item-dense-two-line-height;
 
+          @include ie11-min-height-flexbug($list-item-dense-two-line-height);
+
           > .md-avatar, .md-avatar-icon {
             margin-top: $baseline-grid * 1.5;
           }
@@ -111,6 +127,8 @@ md-list {
         &, & > ._md-no-style {
           min-height: $list-item-dense-three-line-height;
 
+          @include ie11-min-height-flexbug($list-item-dense-three-line-height);
+
           > md-icon:first-child,
           > .md-avatar {
             margin-top: $baseline-grid * 2;
@@ -378,6 +396,8 @@ md-list-item {
       height: auto;
       min-height: $list-item-two-line-height;
 
+      @include ie11-min-height-flexbug($list-item-two-line-height);
+
       > .md-avatar, .md-avatar-icon {
         margin-top: $baseline-grid * 1.5;
       }
@@ -395,6 +415,8 @@ md-list-item {
       height: auto;
       min-height: $list-item-three-line-height;
 
+      @include ie11-min-height-flexbug($list-item-three-line-height);
+
       > md-icon:first-child,
       > .md-avatar {
         margin-top: $baseline-grid * 2;