HOW TO FIX THE IE7 AND INLINE-BLOCK CSS BUG

转载地址:https://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug

While redesigning the previous Uncorked website to be responsive, we found that a few CSS bugs came along with it. One thing to remember, is that supporting Internet Explorer can be a hefty task in itself. Luckily, sometimes there are tricks to making all browsers happy.

Recently, we redesigned the Uncorked Studios website to be responsive to different browser and devices sizes. Along with the responsive design came a few CSS bugs. Here's one that involved the inline-block display in CSS.

Bug: Unordered list element using CSS display: inline-block won't align horizontally in IE7

When recently using the Blueberry responsive jquery image slider on the Uncorked homepage, the pager navigation along the bottom of the slider, which navigates between the featured images, uses display: inline-block to create a horizontal row. But of course, IE7 doesn't recognize _display: inline-block _and gave us this:

Fix: Add zoom:1 and *display: inline to the element in CSS (courtesy of The Mad Ranter)

Original CSS:

    .blueberry .pager li {
    display: inline-block;
    }

Fixed CSS:

    .blueberry .pager li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    }

The asterisk (*) in front of display: inline allows for other browsers to ignore that line. Corrected appearance in IE: