2014-11-23 2 views
0

У меня есть bootstrap и элементы HTML5, такие как холст на веб-странице, которую я разрабатываю. Мой клиент попросил меня предоставить поддержку браузерам IE. Я попытался добавить CSS3PIE, html5shiv, responsejs и excanvas в свой проект, но IE8 все еще не показывает правильный макет, а границы и элементы холста не работают.CSS3 и HTML5 в IE7 и 8

Вот мой код:

<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> 

Я использую код от этой сущности применить PIE.htc к классам начальной загрузки: 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)} 

Я также попробовал использовать абсолютные URL-адреса в файле PIE.htc.

Но javascript не работает и ни одна из функций css3. Есть ли что-то, что я делаю неправильно здесь?

+1

Вы действительно хотите заботиться о IE7 ?! С «браузерами IE» я бы предположил IE9 +, если не указано иное, и заплатил приличным количеством дополнительных денег. – ThiefMaster

+0

@ThiefMaster Я не так обеспокоен IE7, но мне действительно нужна поддержка IE8 – rahules

+1

IE должен быть принят 11+ * care * of;) – Abhitalks

ответ

0

Старый IE использует выделенные свойства css. Вы можете использовать их в своем css. для некоторых объектов, таких как анимация, переходы и все ... вы можете использовать -ms- перед этим свойством. например: `element {transition: all 2s; -ms-переход: все 2s; }

Надеюсь, это поможет.

Смежные вопросы