If we want to support Internet Explorer 8, then we need to
address the lack of both the border-radius
and transform
properties.
For border-radius
we can use a JavaScript-based polyfill such as CSS3 Pie, and we can download this polyfill from its website, http://css3pie.com/, and then copy PIE.js
in our project's js
folder. Next, we can include this JavaScript file from index.html
along with the latest version of jQuery and js/application.js
, an empty file we are going to use in a while:
<!--[if IE 8]> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="js/PIE.js"></script> <script src="js/application.js"></script> <![endif]-->
Usually CSS3 Pie automatically detects how to enhance a given element by identifying the CSS3 properties to emulate. In this case, however, we have used border-top-left-radius
and border-top-right-radius
whereas CSS3 Pie only supports the general...