fixed support for inline-block

Author: liabru

jquery.matchHeight-min.js

@@ -51,13 +51,18 @@
         if (byRow) {
 
             // must first force an arbitrary equal height so floating elements break evenly
-            $elements.css({
-                'display': 'block',
-                'padding-top': '0',
-                'padding-bottom': '0',
-                'border-top-width': '0',
-                'border-bottom-width': '0',
-                'height': '100px'
+            $elements.each(function() {
+                var $that = $(this),
+                    display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
+
+                $that.css({
+                    'display': display,
+                    'padding-top': '0',
+                    'padding-bottom': '0',
+                    'border-top-width': '0',
+                    'border-bottom-width': '0',
+                    'height': '100px'
+                });
             });
 
             // get the array of rows (based on element top position)
@@ -84,10 +89,11 @@
 
             // iterate the row and find the max height
             $row.each(function(){
-                var $that = $(this);
+                var $that = $(this),
+                    display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
 
                 // ensure we get the correct actual height (and not a previously set height value)
-                $that.css({ 'display': 'block', 'height': '' });
+                $that.css({ 'display': display, 'height': '' });
 
                 // find the max height (including padding, but not margin)
                 if ($that.outerHeight(false) > maxHeight)

jquery.matchHeight.js

@@ -251,24 +251,15 @@ a, a:link, a:visited, a:active, a:hover {
     visibility: hidden;
 }
 
-/* test display */
+/* test inline-block */
 
-.display-items .item-0 {
-    display: block;
-    height: 50px;
-}
-
-.display-items .item-1 {
-    display: inline;
-    height: 100px;
+.inline-block-items {
+    text-align: center;
 }
 
-.display-items .item-2 {
+.inline-block-items .item {
     display: inline-block;
-    height: 150px;
-}
-
-.display-items .item-3 {
-    display: table-cell;
-    height: 200px;
+    vertical-align: top;
+    /*width: 20%;*/
+    float: none;
 }

test.css

@@ -217,18 +217,30 @@ <h3>data-mh="items-b"</h3>
                 </div>
             </div>
 
-            <div class="items-container display-items">
+            <div class="items-container inline-block-items">
                 <div class="item item-0">
-                    <p>display: block</p>
+                    <p>display: inline-block</p>
                 </div>
                 <div class="item item-1">
-                    <p>display: inline</p>
+                    <p>display: inline-block</p>
                 </div>
                 <div class="item item-2">
                     <p>display: inline-block</p>
                 </div>
                 <div class="item item-3">
-                    <p>display: table-cell</p>
+                    <p>display: inline-block</p>
+                </div>
+                <div class="item item-4">
+                    <p>display: inline-block</p>
+                </div>
+                <div class="item item-5">
+                    <p>display: inline-block</p>
+                </div>
+                <div class="item item-6">
+                    <p>display: inline-block</p>
+                </div>
+                <div class="item item-7">
+                    <p>display: inline-block</p>
                 </div>
             </div>