border-radius IE8兼容处理

根据canisue(http://caniuse.com/#search=border-radius),border-radius兼容性如下图所示:

测试代码:

 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 7         <title></title>
 8         <style type="text/css">
 9             * {
10                 margin: 0;
11                 padding: 0;
12             }
13
14             #header {
15                 width: 400px;
16                 height: 400px;
17                 margin: 10px;
18                 border-radius: 10px;
19                 border: 1px solid red;
20             }
21         </style>
22     </head>
23
24     <body>
25         <div id="header">
26         </div>
27     </body>
28
29 </html>

IE8浏览器效果:

border-radius在IE8浏览器兼容方案:

 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 7         <title></title>
 8         <style type="text/css">
 9             * {
10                 margin: 0;
11                 padding: 0;
12             }
13
14             #header {
15                 width: 400px;
16                 height: 400px;
17                 margin: 10px;
18                 border-radius: 10px;
19                 border: 1px solid red;
20                 /*关键属性设置 需要把路径设置好*/
21                 behavior: url(PIE.htc);
22             }
23         </style>
24     </head>
25
26     <body>
27         <div id="header">
28         </div>
29     </body>
30
31 </html>

IE8浏览器下效果:

PIE.HTC下载地址:http://css3pie.com/

PIE可以处理CSS3的一些属性,如:

时间: 2024-11-07 14:09:21

border-radius IE8兼容处理的相关文章

IE8兼容placeholder的方案

用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失,placeholder可作为输入框的提示文案 如图: placeholder是常用的属性,它使得input框内有很友好的提示效果.高版本浏览器都支持placeholder属性,但IE9以下版本的浏览器并不支持这一属性.这里用JavaScript实现添加对浏览器

1.12版jquery.validate IE8 兼容解决方案

搜索 formnovalidate 然后改成这种,也就是if中间注释 // allow suppressing validation by adding the html5 formnovalidate attribute to the submit button if ($(event.target).attr("formnovalidate") !== undefined) { //validator.cancelSubmit = true; } 搜索elements 大概500行

ie8兼容

最近在做ie8兼容,把遇到的问题整理了一下 1. margin:0 auto; 无法居中 解决方法:1.换成h4的文档类型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. body,设置text-aligin:center; 缺点,其他标签也会居中 3.

IE8兼容模式 出现问题

有一个可能是 你的JSON对象的字符串有问题例如 你在JS中写到 var json = { 'abc':0, 'def':"呵呵看右边", } 仔细看 呵呵 看右边 右边多了一个, 实际这个json 应该这么写 var json = { 'abc':0, 'def':"呵呵看右边" } 你多了一个, ie8兼容模式 就报错 在你的项目中 搜索 ,[\n\r\s]+?} 这个正则表达式  搜到的 都是问题

IE8兼容问题

setInterval 的用法如下: function func() { setInterval("alert()", 1000, this); // chrome 适用, 但不能传参数 setInterval("alert", 1000, this); // chrome.ie8 都不适用 setInterval(alert, 1000, this); // chrome 适用,可传参,ie8适用,不可传参 } IE8 用 setInterval 是不能正常工作的

IE8+兼容经验小结(转)

IE8+兼容经验小结 January 15, 2014 最近一段时间,我都使用Flask+Bootstrap3的框架组合进行开发.本文就是在这种技术组合下,分享IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK了(这里的IE8+主要是指IE8,据个人目测,IE9+的渲染效果已经非常好了). 前期准备 测试IE兼容性必须要在Windows中测,而且是Win7+,因为WinXP

ie8兼容background-size属性

满心欢喜地写代码,最后测试兼容性的时候发现Logo图片在IE8下特别大.明显是background-size在ie8一下不兼容. 我懂得,IE8还是个孩子,我就加几句你独有的代码让你兼容吧,司空见惯了: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/logo.png', sizingMethod='scale'); 然后发现logo变得十分华丽(奥义·双重logo): 明显是ie8两种backgroun

IE8+兼容经验小结

最近一段时间,我都使用Flask+Bootstrap3的框架组合进行开发.本文就是在这种技术组合下,分享IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK了(这里的IE8+主要是指IE8,据个人目测,IE9+的渲染效果已经非常好了). 前期准备 测试IE兼容性必须要在Windows中测,而且是Win7+,因为WinXP最高只支持IE8,IE9就呵呵啦!大部分做Web的童鞋都

ie7、ie8兼容addEventListener和removeEventListener,解决this指向和detachEvent解除绑定事件问题

现代浏览器监听事件使用addEventListener函数,解除绑定监听使用removeEventListener函数.但是ie7.ie8监听事件使用attachEvent函数,解除监听事件使用detachEvent函数. 简单的兼容函数: 1 if(document.addEventListener){ 2 element.addEventListener(type, fun, useCapture); 3 }else{ 4 element.addEventListener("on"