简体   繁体   English

IE7和8中的CSS3和HTML5

[英]CSS3 and HTML5 in IE7 and 8

I have bootstrap and HTML5 elements like canvas on a webpage I am designing. 我正在设计的网页上有bootstrap和HTML5元素(例如canvas)。 My client has asked me to provide support for IE browsers. 我的客户要求我为IE浏览器提供支持。 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. 我尝试将CS​​S3PIE,html5shiv,responsejs和excanvas添加到我的项目中,但IE8仍未显示正确的布局,边框半径和画布元素也无法正常工作。

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) 我正在使用此要点中的代码将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)}

I also tried using absolute URLs to the PIE.htc file. 我也尝试过使用绝对URL到PIE.htc文件。

But the javascript isn't working and neither is any of the css3 features. 但是javascript无法正常工作,css3的任何功能也没有。 Is there something I am doing wrong here? 我在这里做错什么了吗?

Old IE's Use Depricated css Properties . 旧IE的使用描述了css属性。 You can use them in your css . 您可以在CSS中使用它们。 for some properties such as Animation , Transitions and all ... you can use -ms- before the property . 对于某些属性,例如Animation,Transitions和all ...,可以在属性之前使用-ms- for example : ` element { transition:all 2s; 例如:`element {transition:all 2s; -ms-transition:all 2s; -ms-transition:所有2s; } }

I hope it helps . 希望对您有所帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM