返回顶部
首页 > 资讯 > 精选 >怎么让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://lsjlt.com/news/271322.html(转载时请注明来源链接)

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

猜你喜欢
  • 怎么让ie支持css3
    小编给大家分享一下怎么让ie支持css3,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!让ie支持css3的方法:1、下载“ie-css3.htc”并放到服务器目录...
    99+
    2023-06-14
  • 怎么让IE支持HTML5
    本篇内容介绍了“怎么让IE支持HTML5”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • ie支持css3吗
    CSS3 是一个强大的最新版本的 CSS,它引入了许多新的特性和功能,可以用来创建更好的用户界面和交互性,但是 CSS3 对于不同浏览器兼容性的问题一直是一个令人头疼的问题。在其中一个最受争议的浏览器 - Internet Explorer...
    99+
    2023-05-14
  • 怎么让ie浏览器支持html5
    这篇文章主要介绍了怎么让ie浏览器支持html5的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么让ie浏览器支持html5文章都会有所收获,下面我们一起来看看吧。 代码如下...
    99+
    2024-04-02
  • 如何让IE浏览器支持CSS3圆角属性
    这篇文章主要为大家展示了“如何让IE浏览器支持CSS3圆角属性”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何让IE浏览器支持CSS3圆角属性”这篇文章吧。 ...
    99+
    2024-04-02
  • ie是不是不支持css3动画
    这篇文章主要介绍ie是不是不支持css3动画,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!IE9及以下版本不支持css3动画;CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持;而...
    99+
    2023-06-06
  • 如何让IE支持CSS3 Media Query实现响应式Web设计
    这篇文章将为大家详细讲解有关如何让IE支持CSS3 Media Query实现响应式Web设计,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。如今的屏幕分辨率,小至320px(iPhone),大到2560p...
    99+
    2023-06-08
  • 如何让IE下支持Html5的placeholder属
    这篇文章将为大家详细讲解有关如何让IE下支持Html5的placeholder属,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 HTML5对Web Form做了许多增强...
    99+
    2024-04-02
  • 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+
    2024-04-02
  • 怎么让FTP支持ssl
    让FTP支持ssl的方法:使用FileZilla server进行配置,在工具栏中选择“设置”。左侧列表找到“SSL/TLS settings”,进行设置。在设置中勾选以下选项,如:Enable FTP over SSL/TLS suppo...
    99+
    2024-04-02
  • bootstrap3支持ie系列
    原文:http://79px.com/html-css/263  源泉  星期四, 11/20/2014 - 16:25其实,之前一直以为Bootstrap3很难实现对ie9一下的版本兼容。但前两天看了一个同行的网站,用的Bootstrap...
    99+
    2023-01-31
    系列
  • css3支不支持rgba
    这篇文章主要介绍“css3支不支持rgba”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3支不支持rgba”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • ie9支持css3吗
    本篇内容主要讲解“ie9支持css3吗”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ie9支持css3吗”吧! IE9支持css3;...
    99+
    2024-04-02
  • 如何让IE下支持Html5的placeholder属性的插件
    这篇文章将为大家详细讲解有关如何让IE下支持Html5的placeholder属性的插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 HT...
    99+
    2024-04-02
  • 怎么让Jupyter支持SQL处理
    本篇内容主要讲解“怎么让Jupyter支持SQL处理”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么让Jupyter支持SQL处理”吧!现在用Jupyter进...
    99+
    2024-04-02
  • 怎么才能让Node.js支持ES6
    随着前端技术的不断更新和发展,ES6已成为了前端开发中的重要语言之一。而Node.js作为一个基于JavaScript的服务器端开发平台,自然也需要支持ES6的语法。那么,究竟怎么样才能让Node.js支持ES6呢?本文将从以下几个方面来进...
    99+
    2023-05-14
  • css3支不支持border属性
    今天小编给大家分享一下css3支不支持border属性的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了...
    99+
    2024-04-02
  • 如何设置ie支持ssl2.0
    设置ie支持ssl2.0的方法:打开ie浏览器。点击浏览器右上角类似设置的按钮,选择“internet选项”。在对话框中,选择“高级”选项卡,在列表中勾选“使用SSL 2.0”。设置完成后点击“确定”即可。...
    99+
    2024-04-02
  • 怎么让MYSQL彻底支持中文
    这篇文章主要为大家展示了“怎么让MYSQL彻底支持中文”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么让MYSQL彻底支持中文”这篇文章吧。  先将让slac...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作