CSS3 and HTML5 in IE7 and 8

Question

I have bootstrap and HTML5 elements like canvas on a webpage I am designing. My client has asked me to provide support for IE browsers. I tried adding CSS3PIE, html5shiv, respondjs and excanvas to my project but IE8 still isn't showing the correct layout and the border radius and canvas elements doesn't work either.

Here is my code:

<head>
    <title>Title</title>
    <!--[if lt IE 9]>

        <script src="js/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
        <!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="css/ie.css">
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">


</head>

I am using the code from this gist to apply the PIE.htc to the bootstrap classes: https://gist.github.com/coliff/5618329 (ie.css)

.img-circle{behavior:url(/scripts/PIE.htc)}
.img-rounded{behavior:url(/scripts/PIE.htc)}
.img-thumbnail{behavior:url(/scripts/PIE.htc)}
.table-bordered{behavior:url(/scripts/PIE.htc)}
select,textarea,input,code,pre,kbd,pre{behavior:url(/scripts/PIE.htc)}
.input-group-addon{behavior:url(/scripts/PIE.htc)}
.btn{behavior:url(/scripts/PIE.htc)}
.dropdown-menu{behavior:url(/scripts/PIE.htc)}
.form-control{behavior:url(/scripts/PIE.htc)}
.panel{behavior:url(/scripts/PIE.htc)}
.well{behavior:url(/scripts/PIE.htc)}
.nav-tabs > li > a{behavior:url(/scripts/PIE.htc)}
.nav-pills > li > a{behavior:url(/scripts/PIE.htc)}
.navbar{behavior:url(/scripts/PIE.htc)}
.navbar-nav > li > a{behavior:url(/scripts/PIE.htc)}
.navbar-toggle{behavior:url(/scripts/PIE.htc)}
.navbar-toggle .icon-bar{behavior:url(/scripts/PIE.htc)}
.breadcrumb{behavior:url(/scripts/PIE.htc)}
.pagination{behavior:url(/scripts/PIE.htc)}
.pager li > a,.pager li > span{behavior:url(/scripts/PIE.htc)}
.modal-content{behavior:url(/scripts/PIE.htc)}
.tooltip-inner{behavior:url(/scripts/PIE.htc)}
.popover{behavior:url(/scripts/PIE.htc)}
.popover-title{behavior:url(/scripts/PIE.htc)}
.alert{behavior:url(/scripts/PIE.htc)}
.thumbnail,.img-thumbnail{behavior:url(/scripts/PIE.htc)}
.label{behavior:url(/scripts/PIE.htc)}
.badge{behavior:url(/scripts/PIE.htc)}
.progress{behavior:url(/scripts/PIE.htc)}
.carousel-indicators li{behavior:url(/scripts/PIE.htc)}
.jumbotron{behavior:url(/scripts/PIE.htc)}

I also tried using absolute URLs to the PIE.htc file.

But the javascript isn't working and neither is any of the css3 features. Is there something I am doing wrong here?

Answer 1

Old IE's Use Depricated css Properties . You can use them in your css . for some properties such as Animation , Transitions and all ... you can use -ms- before the property . for example : ` element { transition:all 2s; -ms-transition:all 2s; }

I hope it helps .

CSS3 and HTML5 in IE7 and 8

Question

1 answers

solution1
0 2014-11-23 13:55:48

CSS3 and HTML5 in IE7 and 8

Question

1 answers

solution1 0 2014-11-23 13:55:48

solution1
0 2014-11-23 13:55:48