Gradient and Border Fix for Bootstrap Buttons in IE7 and IE8
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
.gitattributes
.gitignore
LICENSE.md
README.md

README.md

#Bootstrap Buttons: Gradient and Border Fix for IE7 and IE8

Provided by Clay Street Online under an MIT License

Screenshots of Bootstrap Buttons:

Internet Explorer 7

Screenshot of IE7 Bootstrap Buttons

Internet Explorer 8

Screenshot of IE8 Bootstrap Buttons

Internet Explorer 7 WITH the Button Fix!!!

Screenshot of IE7 Bootstrap Buttons

Visit the live demo site in Internet Explorer 7 or 8 to see the style fix in action.

##IE Button Styling: Problem Summary

  • IE7 doesn't support CSS button border styling, standard gradients, or rounded corners.
    The solution:

    • Use an IE specific gradient filter to create a gradient.
    • Use IE specific DropShadow filters to create a border.
  • IE8 supports CSS button border styling but NOT standard gradients or rounded corners.
    The solution:

    • Use an IE specific gradient filter to create a gradient.
    • Do NOT use IE specific DropShadow filters since the border is properly CSS styled.
  • IE9 supports CSS button border styling and rounded corners but NOT standard gradients. HOWEVER, IE9 does NOT contain the IE specific background gradient filter within the rounded corners.
    The solution:

    • Drop the IE specific gradient filter in favor of the rounded corners.
    • Do NOT use DropShadow filters since the border is properly CSS styled.
    • NOTE: What you end up with on IE9+ is the standard Bootstrap styling (which results in no gradient on IE9).
  • IE10+ is similar to IE9... we just take the styling Bootstrap gives us.

##Usage:

Conditionally include bootstrap-ie7buttonfix.css and bootstrap-ie8buttonfix.css somewhere AFTER bootstrap.css as follows:

<link rel="stylesheet" href="css/bootstrap.css">
<!--[if lt IE 8]><link rel="stylesheet" href="css/bootstrap-ie7buttonfix.css"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="css/bootstrap-ie8buttonfix.css"><![endif]--> 

Note: By conditionally including the CSS only in Internet Explorer 7 & 8 we avoid forcing modern browsers to carry any extra CSS processing burden!

##Comments:

  • All things considered... the default Bootstrap style is good enough. I just got obsessed one day with trying to figure out why the Bootstrap team disabled the button gradient filters in the CSS (they're in the CSS but disabled).

  • If the bootstrap team cared to do so... they could take a more general approach to IE quirks by creating conditionally included "patch" CSS such as:

    <link rel="stylesheet" href="css/bootstrap.css">
    <!--[if lt IE 8]><link rel="stylesheet" href="css/bootstrap-ie7patches.css"><![endif]-->
    <!--[if IE 8]><link rel="stylesheet" href="css/bootstrap-ie8patches.css"><![endif]-->
    <!--[if IE 9]><link rel="stylesheet" href="css/bootstrap-ie9patches.css"><![endif]--> 

    Then they could also remove the rest of the IE klunk from Bootstrap's CSS! :)

    NOTE: I'll probably take this approach as I tweak other areas of Bootstrap!