广告
返回顶部
首页 > 资讯 > 精选 >怎么让ie支持css3
  • 543
分享到

怎么让ie支持css3

2023-06-14 14:06:00 543人浏览 泡泡鱼
摘要

小编给大家分享一下怎么让ie支持css3,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!让ie支持CSS3的方法:1、下载“ie-css3.htc”并放到服务器目录

小编给大家分享一下怎么让ie支持css3,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

让ie支持CSS3的方法:1、下载“ie-css3.htc”并放到服务器目录中使用;2、下载“css3 PIE.htc”文件,然后将“PIE.htc”文件上传到网站目录中。

本文操作环境:windows7系统、Dell G3电脑、HTML5&&CSS3版。

方法1:使用ie-css3.htc

ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

它的使用方法是:下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码:

<!--[if IE]><style type="text/css">img, #testdiv, .testbox{behavior: url(Http://yourdomain.com/js/ie-css3.htc);}</style><![endif]-->

方法2:使用css3 pie插件

css3 pie 是一款可以让 ie 浏览器支持部分 css3 属性的插件。

官方网站:http://css3pie.com/

使用方法:

下载css3 PIE.htc 文件

将PIE.htc文件上传到你的网站目录中,上传到目录哪里都可以,只要你记住这个目录。

创建html文件,写一段css3代码,并引入PIE.htc,如下面这段:

#id {border: 1px solid #999;-WEBkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;behavior: url(path/to/PIE.htc);}

注意:.htc 文件路径是相对于html文件的路径,而不是相对于css文件。

已知的一些问题:

此方法并不是万能的,也有一些局限性和需要注意的地方。

z-index相关问题

IE下这些CSS3效果实现是借助于VML,由VML绘制圆角或是投影效果的容器元素,然后这个容器元素作为目标元素的后兄弟节点插入,如果目标元素position:absolute 或是 position:relative,则这个css3-container元素将会设置与之一样的z-index值,在DOM tree中,同级的元素总是后面的覆盖前面的,所以这样就实现了覆盖,又避免了可能有其他元素正好插入其中。

所以,问题来了,如果目前元素的position属性为static,也就是默认属性,则z-index属性是没有用的,无覆盖可言,所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单,设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值(不可为-1)。

相当路径的问题

IE浏览器的behavior 属性是相对于HTML文档而言的,与CSS其他的属性不一样,不是相对于CSS文档而言的。这使得使用pie.htc文件不怎么方便。如果绝对路径于根目录,则CSS文件不方便移动;如果相对路径与HTML文档,则pie.htc文件在不同HTML页面见的重用性大大降低。同时,诸如border-image后面的URL属性路径也不好处理。

缩写的问题

使用PIE实现IE下的CSS3渲染(其他方法也是一样),只能使用缩写的形式,例如圆角效果,我们可以设置border-top-left-radius表示左上圆角,但是PIE确实不支持这种写法的,只能是老老实实的缩写。

提供正确的Content-Type

要想让IE浏览器支持htc文件,需要一个有着"text/x-component" 字样的content-type 头部,否则,会忽视behavior。绝大数web服务器提供了正确的content-type,但是还有一部分则有问题。

如果您发现在您的机子上PIE方法无效,也就是htc文件这里指pie.htc文件无效,检查您的服务器配置,可能其需要更新到最新的content-type。例如对于Apache,您可以在.htaccess文件中做如下处理:

AddType text/x-component .htc

但是,由于某种原因,您无法修改服务器配置(例如公用主机,或是空间服务商提供的服务器),您可以用一个PHP文件来间接调用htc文件。我只要给你看下这个php文件的代码您就知道什么意思了,如下:

<?phpheader( 'Content-type: text/x-component' );include( 'pie.htc' );?>

通过PHP文件来增加一个含有"text/x-component"字样的Content-type头,同时调用pie.htc文件。

关于上面所示的php文件,您可以狠狠地点击这里:pie.php(右键 – [目标|链接另存为]),或者您可以直接新建一个php文件,把上面的两行代码复制进去。或者在本文提供的原始打包资源的wrappers文件夹里面也有此php文件,不过名称是大写的。

如果您使用上述php文件,您需要将pie.php和pie.htc放在同一个文件夹目录下,同时CSS中的behavior写法应该是:

behavior: url(pie.php);

以上是“怎么让ie支持css3”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: 怎么让ie支持css3

本文链接: https://www.lsjlt.com/news/271322.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 怎么让ie支持css3
    小编给大家分享一下怎么让ie支持css3,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!让ie支持css3的方法:1、下载“ie-css3.htc”并放到服务器目录...
    99+
    2023-06-14
  • 怎么让IE支持HTML5
    本篇内容介绍了“怎么让IE支持HTML5”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • ie支持css3吗
    CSS3 是一个强大的最新版本的 CSS,它引入了许多新的特性和功能,可以用来创建更好的用户界面和交互性,但是 CSS3 对于不同浏览器兼容性的问题一直是一个令人头疼的问题。在其中一个最受争议的浏览器 - Internet Explorer...
    99+
    2023-05-14
  • 怎么让ie浏览器支持html5
    这篇文章主要介绍了怎么让ie浏览器支持html5的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么让ie浏览器支持html5文章都会有所收获,下面我们一起来看看吧。 代码如下...
    99+
    2022-10-19
  • 如何让IE浏览器支持CSS3圆角属性
    这篇文章主要为大家展示了“如何让IE浏览器支持CSS3圆角属性”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何让IE浏览器支持CSS3圆角属性”这篇文章吧。 ...
    99+
    2022-10-19
  • 如何让IE支持CSS3 Media Query实现响应式Web设计
    这篇文章将为大家详细讲解有关如何让IE支持CSS3 Media Query实现响应式Web设计,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。如今的屏幕分辨率,小至320px(iPhone),大到2560p...
    99+
    2023-06-08
  • ie是不是不支持css3动画
    这篇文章主要介绍ie是不是不支持css3动画,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!IE9及以下版本不支持css3动画;CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持;而...
    99+
    2023-06-06
  • 如何让IE下支持Html5的placeholder属
    这篇文章将为大家详细讲解有关如何让IE下支持Html5的placeholder属,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 HTML5对Web Form做了许多增强...
    99+
    2022-10-19
  • IE对HTML5的支持怎么样
    这篇文章主要为大家展示了“IE对HTML5的支持怎么样”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“IE对HTML5的支持怎么样”这篇文章吧。IE对HTML 5的支持IE浏览器目前对HTML 5...
    99+
    2023-06-27
  • 怎么让php支持pdo_mysql
    本篇内容主要讲解“怎么让php支持pdo_mysql”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么让php支持pdo_mysql”吧!1.pdo_mysql...
    99+
    2022-10-18
  • 怎么让FTP支持ssl
    让FTP支持ssl的方法:使用FileZilla server进行配置,在工具栏中选择“设置”。左侧列表找到“SSL/TLS settings”,进行设置。在设置中勾选以下选项,如:Enable FTP over SSL/TLS suppo...
    99+
    2022-10-16
  • 如何让IE下支持Html5的placeholder属性的插件
    这篇文章将为大家详细讲解有关如何让IE下支持Html5的placeholder属性的插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 HT...
    99+
    2022-10-19
  • 怎么让Jupyter支持SQL处理
    本篇内容主要讲解“怎么让Jupyter支持SQL处理”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么让Jupyter支持SQL处理”吧!现在用Jupyter进...
    99+
    2022-10-18
  • 怎么才能让Node.js支持ES6
    随着前端技术的不断更新和发展,ES6已成为了前端开发中的重要语言之一。而Node.js作为一个基于JavaScript的服务器端开发平台,自然也需要支持ES6的语法。那么,究竟怎么样才能让Node.js支持ES6呢?本文将从以下几个方面来进...
    99+
    2023-05-14
  • 怎么让MYSQL彻底支持中文
    这篇文章主要为大家展示了“怎么让MYSQL彻底支持中文”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么让MYSQL彻底支持中文”这篇文章吧。  先将让slac...
    99+
    2022-10-19
  • CSS怎么让IE6支持PNG透明
    本篇内容介绍了“CSS怎么让IE6支持PNG透明”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 妄想IE...
    99+
    2022-10-19
  • 如何解决IE支持CSS3的不完全兼容的额问题
    这篇文章主要讲解了“如何解决IE支持CSS3的不完全兼容的额问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决IE支持CSS3的不完全兼容的额问题”...
    99+
    2022-10-19
  • 如何实现让ie浏览器成为支持html5的浏览器
    本篇内容主要讲解“如何实现让ie浏览器成为支持html5的浏览器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何实现让ie浏览器成为支持html5的浏览器”吧...
    99+
    2022-10-19
  • WinXP系统里让IE支持多线程下载的设置方法
    随着电脑的普及化和网络速度的提高很多人会进行网上冲浪在网上下载电影来观看,有时我们会同时下载多个文件,为了支持多线程下载通常都会选择专业软件进行下载,因为不少人认为ie浏览器是不支持多线程下载只支持单线程下载,其实不是的...
    99+
    2023-06-07
    WinXP系统 IE 多线程下载 设置 多线程 系统 WinXP 方法
  • 怎么让IIS6支持svg图像显示
    本篇内容主要讲解“怎么让IIS6支持svg图像显示”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么让IIS6支持svg图像显示”吧!今天测试的一个代码,在本地一切正常,可是上传到服务器上之后就...
    99+
    2023-06-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作