border-radius兼容低版本ie解决方法

昨天写了篇bootstrap兼容低版本ie的写法,可以戳这里查看。然后突然想到很多设计在设计页面的时候都喜欢将元素设计成圆角的,于是便去查了下如何使低版本ie不用写很多背景定位就实现圆角效果,一查果然有这种好用的工具,这里就列出如何使用。

  • css代码
position: relative;
z-index: 2;
border-radius: 50%;
behavior: url(css/ie-css3.htc);
  • 注意点
1、只能同时4角圆角,不能单独设置;
2、div上可以正常使用,测试text文本框,会出现异常;
3、当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
4、z-index值一定要比周围元素的要高,否则……只能说抱歉了
  • 问题
    当你真正的按照上面的写法在项目里用上后,打开Ie发现并没有效果,心里暗暗的骂 '2 13'博主,写的什么东西,根本没法用啊!!!
    先别急,继续看下面的:

    没有效果,是因为ie下报错了,ie左下角有个黄色警告标志,点击开:


    error.png

    网上搜索,发现是浏览器的同源策略(这个词你应该经常听到,在跨域请求数据时),本地静态调试确实不行。(备注:同源——域名,协议,端口号)

  • 解决方法

在对应的目录下开一个http server, 再通过ie访问就成了。
开一个http server方法有很多,gulp,百度的fis,express都可以。
  • gulp开启本地http server
1.你需要安装node.js
2.在命令行中进入项目所在文件夹,执行npm install --save-dev gulp gulp-connect
3.在根目录下新建gulpfile.js,里面内容为:
      var gulp = require('gulp');
      var connect = require('gulp-connect');
      gulp.task('webserver', function () {
          connect.server({
              port: 8888
          });
      });
      gulp.task('default', ['webserver']);
4.开启服务,命令行执行gulp
5.在浏览器中输入localhost:8888,就可以看到效果了

ie访问localhost会失败,需要设置下ie:

IE -Internet设置-连接-局域网设置-代理服务器后面的 高级 选项   
弹出的页面下方有个不使用代理服务器链接的地方 输入  *localhost 然后再试试

最后附上这个神奇的工具,请戳这里ie-css3.htc

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,281评论 19 139
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,884评论 1 32
  • 首先非常不好意思,最近好久不写文章了,因为最近事情比较多,也比较繁忙,所以就忘记写文章了,今天就和大家聊聊前端构建...
    coderYJ阅读 3,265评论 0 0
  • gulp安装 1.在系统安装(全局安装): npm install gulp-cli -g 2.在文件中安装...
    郭月帅阅读 2,707评论 0 2
  • 今天唯一值得庆祝的是,我学象棋啦~傻人傻福,我在七爷的指导下我赢了!!啊哈哈哈哈 今天刚从老家拿回来的,老姨家儿时...
    于小鱼在路上阅读 2,144评论 0 0

友情链接更多精彩内容