IE系列不支持圆角等CSS3属性的解决方案

IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题，而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好，如何解决这个问题呢？

一种比较传统的方案是放弃CSS3，使用背景图，但是这种方式也会有诸多问题，对页面结构改动较大，需要对自适应大小进行控制等，成本较高。

另外一种是百度了一下，发现有个开源的插件可以解决此问题：http://css3pie.com/

使用方法很简单，下载了之后直接引用.htc文件即可。

附：

htc = HTML Component，应该是IE独有的，支持自定义行为

时间： 2024-10-09 09:08:21

IE系列不支持圆角等CSS3属性的解决方案的相关文章

IE8不支持的部分css3属性处理

IE8不支持的部分css3属性 1.1 border-radius 圆角 border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;background: #EEFF99;behavior: url(/PIE.htc); 说明:不支持单边的圆角属性,比如: border-t

JS判断浏览器是否支持某一个CSS3属性的最佳实践

css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的animation-play-state,就只有部分浏览器支持. 检测方法 下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: /**2017-01-05 * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false

JS判断浏览器是否支持某一个CSS3属性

1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的animation-play-state,就只有部分浏览器支持. 2.检测方法 下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: Js代码   /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/fa

JS判断浏览器是否支持某一个CSS3属性的方法

var div = document.createElement('div'); console.log(div.style.transition); //如果支持的话, 会输出 "" //如果不支持的话, 会输出 undefined. //新版本的浏览器不用判断前缀了, 老版本的浏览器还是需要判断前缀 //可参考: http://www.jb51.net/article/56412.htm

判断浏览器是否支持某一个CSS3属性

function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [], htmlStyle = document.documentElement.style, _toHumb = function (string) { return string.replace(/-(\w)/g, function ($0, $1) { return $1.toUpperCase(); }); };

document.documentElement.style判断浏览器是否支持Css3属性

1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAnimation等 2.判断浏览器是否支持制定的css属性 function support(cssName) { var htmlStyle = document.documentElement.style; if (cssName in htmlStyle) return true; return

判断浏览器是否支持某个css3属性的javascript方法

判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false * @version 1.0 * @author ydr.me * 2014年4月4日14:47:19 */   function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [],

IE6/7/8如何兼容CSS3属性

最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc.个人认为这两个文件的作用差不多,具体差异值得探讨) 下载地址:https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3 支持的主要CSS3属性: 1.border-radius圆角 CSS代码如下: .pie_radius{ width:250px;height:250px; background-color:#345

让IE6/IE7/IE8浏览器支持CSS3属性

让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件,.htc文件是个脚本文件,我个人以为与js文件属于同一货色,只是呢,貌似htc是Internet Explorer(IE)的私生子,只有IE才认它.htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控