IE8 兼容 border-radius

最新推荐文章于 2021-08-03 23:24:28 发布

weixin_44487623

最新推荐文章于 2021-08-03 23:24:28 发布

阅读量574

点赞数

分类专栏：前端小菜鸟之路

本文链接：https://blog.csdn.net/weixin_44487623/article/details/86290863

版权

前端小菜鸟之路专栏收录该内容

7 篇文章 0 订阅

订阅专栏

IE8 兼容 border-radius

W3C 参考手册中，border-radius支持IE9以上的版本。

在这里插入图片描述

解决方案

所以想要在IE8下使用该属性，需要配合js 或者一些其他的插件。
1.首先下载源文件css3pie 1.0和2.0都可以
在这里插入图片描述

2.下载完成后解压把PIE.htc文件放在该html页面的同级目录下! 在这里插入图片描述
3.把PIE.js文件放在你的js文件夹下!

然后在你的css代码中加入

border-radius: 50%;
behavior:url(PIE.htc);

(文件放在同一目录下路径就直接写成这样，千万不要写成 …/PIE.htc 也可以写成 pie.htc)
在页面引入js文件

<script type="text/javascript" src="js/PIE.js"></script>

成功啦 ^ 。^
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_44487623

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

border-radius IE8兼容处理的方法

11-21

根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示：测试代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * {

IE8兼容border-radius

热门推荐

wanglufei_1992的博客

07-13

1万+

最近在写PC端活动页面，UI给的设计稿里边有大量的圆角。咨询过做PC端的同事，说只能兼容到IE9。但是心里不甘心，于是在网上找到了PIE.htc文件。发现它能完美兼容IE8。在这里我把代码步骤给大家罗列一下。 1.下载PIE.htc文件。放到任意位置，前提是你引用的时候可以找得到。 2.给需要设置圆角的元素添加样式： position:relative; z-index:2;

参与评论您还未登录，请先登录后发表或查看评论

让IE8也能使用border-radius

林三岁的博客

11-20

284

做前端的时候最怕的就是遇到IE,css的圆角和阴影属性在IE8下没有效果可以下载iecss3.htc后在页面中直接引用下载地址:https://download.csdn.net/download/weixin_42516949/11986712 样例 .btn01{ border:none; font-size:14px...

border-radius 兼容 IE8浏览器

祈澈菇凉

06-01

949

我们都知道，前端开发最让人头疼的事情，就是兼容ie系列的浏览器了，不但麻烦还让人头秃，今天记录一个border-radius属性IE8浏览器兼容的问题。在IE8浏览器里面，border-radius这个属性是不起作用的，这个时候，就需要进行一些处理了，首先下载pie.htc文件pie.htc是一个可以解决IE6/7/8无法支持CSS3属性的文件 PIE.HTC下载地址：http://css3pie...

css borderradius ie8,border-radius IE8兼容处理的方法

weixin_30921373的博客

08-03

305

测试代码：* {margin: 0;padding: 0;}#header {width: 400px;height: 400px;margin: 10px;border-radius: 10px;border: 1px solid red;}IE8浏览器效果：border-radius在IE8浏览器兼容方案：* {margin: 0;padding: 0;}#header {width: 400...

浅析border-radius如何兼容IE

09-28

本文将详细讲解如何使`border-radius`在IE浏览器中实现兼容。首先，我们需要了解`border-radius`的基本用法。在现代浏览器中，我们可以像下面这样设置一个圆形元素： ```css .d1 { width: 5em; height: 5em; ...

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

09-25

然而，对于不支持这些前缀的浏览器（如IE和360浏览器），即使保留这些属性，也不会产生任何负面影响，因为它们遵循CSS3的标准属性`border-radius`。 `border-radius`属性可以接受一个到四个值，分别代表左上角、右...

border-radius兼容ie78

12-25

在描述中提到的“css3的border-radius 为了兼容ie8浏览器所用到的插件以及实例”，指的是使用CSS3 Pie插件来使IE7和IE8支持`border-radius`。要使用CSS3 Pie，你需要在HTML文档中引入Pie.js文件，并在需要应用`...

引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果

08-18

然而，这个特性在早期的Internet Explorer浏览器，如IE7和IE8，并不被支持。为了解决这个问题，开发者们发明了一种名为PIE ( Positioned Inline Element ) 的技术，它通过一个名为`.htc`（HTML Component）的文件来...

border-radius、box-shadow兼容IE8

jiang_fulai的博客

04-19

3867

border-radius、box-shadow兼容IE8border-radiusbox-shadow兼容IE8 属性兼容情况 IE8对于该属性的显示问题解决方法 IE8显示结果属性兼容情况由于border-radius、box-shadow这两个属性属于css3属性，并且要求IE9及以上版本，面对公司要求兼容到IE8版本，目前使用当前方法可以完美支持。 border-ra

ie8实现border-radius(box-shadow)的效果

笑到世界都狼狈的博客

08-06

858

项目中要求兼容ie8，但是border-radius并不兼容ie8，那么要怎样做到兼容呢？我在网上百度了解到一种方法是可以兼容ie8圆角的，所以就记录下来，方便以后的使用(box-shadow同样有用) 首先，看一下我们平时是怎么写圆角的如上图所示，ie8里的效果并不是我们想要的，我们希望ie8里面显示的也是个圆，所以这个时候主要就出来了。。。。 1.首先下载PIE.htc,下载地址h...

解决ie7，8不能使用css3的border-radius的方法

lz_1129的博客

04-04

2537

我们都知道css3的熟悉从支持ie9开始，那么ie7，8怎么使用border-radius这一css3特效呢？其实非常简单，接下来就说一种我自己用过的方法。1、首先下载ie-css3.htc2、html代码：<div class="box"></div>3、style代码：<style> .box { position:relative; ...

ie8兼容border-radius方法

weixin_30553065的博客

03-23

<!doctype html><html> <head> <meta charset="utf-8" /> </head> <title></title> <style> .border{width: 100px; height: 100px; bor...

巧用border属性兼容ie8圆角问题

Spirit9527的博客

04-13

4338

1.border-radius可以实现css中的圆角样式，但不支持IE8及以下版本 2.border属性有三个参数：宽度、样式、颜色； 3.而其中样式又包括三种： solid（实线）、 dotted （点划线）、 dashed（虚线）； 4.IE中dotted(点划线)和其他浏览器的不一样，放大了看是圆，现在读到这是不是应该有想法了； 5.实例代码： style> .b

border-radius IE8兼容处理

有问题可关注公众号：前端研究院后台输入问题回复

10-09

2280

根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示：测试代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv=...

IE8 兼容 border-radius 属性方案

凝弧

06-07

6170

1. IE利用VML矢量可标记语言作为画笔绘出圆角 IE8及一下不支持 border-radius属性，如果要想在IE浏览器中实现圆角的效果 1. IE利用VML矢量可标记语言作为画笔绘出圆角 .main{ border: 2px solid #C0C0C0; -moz-border-radius: 10px; -webkit-border-radius: 10px; bo...

关于box-shadow、border-radius不兼容ie8的解决办法

u013561722的专栏

01-25

818

本来从css3兼容ie9+挺好的，可是总有一些共识要求ie8+,于是就有了我们的苦逼的找解决办法。之前在网上查到一些说用 PIE.htc 先说 box-shadow: <style> .div{ width:500px; height:200px; border: 1px solid #eaeaea; behavior: url(pie.htc); -moz-bo...

IE8兼容border-radius.

01-24

125

　　我们知道，CSS3新增的很多简洁优美的属性，比如border-radius、box-shadow、border-image、gradients、RGBA...因为这些属性的出现，我们可以很方便的就写会很多好看的页面。但是，IE8对于CSS3的属性来说是个坎，IE8及其以下不支持CSS3属性。因此，我们需要去兼容它。下面就来说下如何兼容border-radius：　提示：be...

IE8下兼容border-radius方法