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

作者: webCoder | 来源:发表于2016-04-13 09:29 被阅读4194次

原生发生ajax
border-radius兼容低版本ie解决方法
ie8兼容调试
自适应浏览器窗口的解决方法（非服务器状态）</a></li><li><a href="#r5">js内置方法实现base64转换</a></li><li><a href="#r6">border-radius如何兼容IE </a></li><li><a href="#r7">CSS3新特性，兼容性，兼容方法总结</a></li><li><a href="#r8">获取非行间样式</a></li><li><a href="#r9">IE 下 base 标签失效</a></li><li><a href="#r10">2021-01-08</a></li></ol></div> <blockquote> <p>昨天写了篇bootstrap兼容低版本ie的写法，可以<a href="https://www.jianshu.com/p/aa4b65ee8704" target="_blank">戳这里</a>查看。然后突然想到很多设计在设计页面的时候都喜欢将元素设计成圆角的，于是便去查了下如何使低版本ie不用写很多背景定位就实现圆角效果，一查果然有这种好用的工具，这里就列出如何使用。</p></blockquote> <ul> <li>css代码</li> </ul> <pre><code>position: relative; z-index: 2; border-radius: 50%; behavior: url(css/ie-css3.htc); </code></pre> <ul> <li>注意点</li> </ul> <pre><code>1、只能同时4角圆角，不能单独设置； 2、div上可以正常使用，测试text文本框，会出现异常； 3、当前元素一定要有定位属性，像是position:relative或是position:absolute属性。 4、z-index值一定要比周围元素的要高，否则……只能说抱歉了 </code></pre> <ul> <li> <p>问题<br> 当你真正的按照上面的写法在项目里用上后，打开Ie发现并没有效果，心里暗暗的骂 '2 13'博主，写的什么东西，根本没法用啊！！！<br> 先别急，继续看下面的：</p> <p>没有效果，是因为ie下报错了，ie左下角有个黄色警告标志，点击开：</p> <br> <img src="https://img.haomeiwen.com/i712523/5337965a24183561.png"> error.png <p>网上搜索，发现是浏览器的同源策略（这个词你应该经常听到，在跨域请求数据时）,本地静态调试确实不行。（备注：同源——域名，协议，端口号）</p> </li> <li> <p>解决方法</p></li> </ul> <pre><code>在对应的目录下开一个http server，再通过ie访问就成了。开一个http server方法有很多，gulp，百度的fis，express都可以。 </code></pre> <ul> <li>gulp开启本地http server</li> </ul> <pre><code>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，就可以看到效果了 </code></pre> <p>ie访问localhost会失败，需要设置下ie:</p> <pre><code>IE -Internet设置-连接-局域网设置-代理服务器后面的高级选项弹出的页面下方有个不使用代理服务器链接的地方输入 *localhost 然后再试试 </code></pre> <p>最后附上这个神奇的工具，<a href="https://link.jianshu.com?t=http://pan.baidu.com/share/link?shareid=2891551890&uk=1830501135" target="_blank" rel="nofollow">请戳这里ie-css3.htc</a> 。</p> </div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><a href="/user/wikxhxtx.html"><img src="https://img.haomeiwen.com/is14188402/ac28aa7dc9d4f9a0.png" width="80"></a><h3><a href="/subject/osauaftx.html">原生发生ajax</a></h3><p>兼容低版本IE</p></li><li id="r2"><a href="/user/ituuxttx.html"><img src="https://img.haomeiwen.com/is712523/5337965a24183561.png" width="80"></a><h3><a href="/subject/kfvwlttx.html">border-radius兼容低版本ie解决方法</a></h3><p>昨天写了篇bootstrap兼容低版本ie的写法，可以戳这里查看。然后突然想到很多设计在设计页面的时候都喜欢将元素...</p></li><li id="r3"><a href="/user/ejyqhxtx.html"><img src="https://img.haomeiwen.com/us14228044/140d2ae2-49b6-4e1f-b316-7ee0cd08492a.jpg" width="80"></a><h3><a href="/subject/ftlatqtx.html">ie8兼容调试</a></h3><p>本篇记录工作中遇到的ie8兼容问题以及找到的解决方法圆角的处理border-radius border-ra...</p></li><li id="r4"><a href="/user/mkeokxtx.html"><img src="https://img.haomeiwen.com/is15035764/0bbdb787cf2c59ff.png" width="80"></a><h3><a href="/subject/foiofqtx.html"><iframe>自适应浏览器窗口的解决方法（非服务器状态）</a></h3><p>标签自适应浏览器窗口的解决方法，兼容ie7低版本，此方法没有跨域问题最近碰上的项目都是后台项目，这样的，（下图是...</p></li><li id="r5"><a href="/user/dfccjttx.html"><img src="https://img.haomeiwen.com/us4642829/fad47512-b4c6-426b-a3b5-5838506dd590.jpg" width="80"></a><h3><a href="/subject/doawwrtx.html">js内置方法实现base64转换</a></h3><p>1. 该方式只是兼容ie10及其以上，做移动端项目或者对ie低版本兼容没要求，这种方式适用； 2. 该方式需要将字...</p></li><li id="r6"><a href="/user/ucdsrttx.html"><img src="https://img.haomeiwen.com/ud/11-4d7c6ca89f439111aff57b23be1c73ba.jpg" width="80"></a><h3><a href="/subject/xpknpttx.html">border-radius如何兼容IE </a></h3><p>目前而言firefox，opera,chrome等主流浏览器都已经支持border-radius属性，唯独IE8以...</p></li><li id="r7"><a href="/user/mthlvttx.html"><img src="https://img.haomeiwen.com/ud/9-cceda3cf5072bcdd77e8ca4f21c40998.jpg" width="80"></a><h3><a href="/subject/juvamxtx.html">CSS3新特性，兼容性，兼容方法总结</a></h3><p>1.用于添加边框圆角效果（border-radius）：兼容性： IE9+,Firefox4+,Chrome5...</p></li><li id="r8"><h3><a href="/subject/bwtmuttx.html">获取非行间样式</a></h3><p>获取非行间样式该方法兼容IE低版本，获取到的是带px的样式。</p></li><li id="r9"><h3><a href="/subject/expasttx.html">IE 下 base 标签失效</a></h3><p># 1. 低版本 IE 浏览器 base 标签无效 > 目前存在问题，在高版本 IE 浏览器下，使用兼容模式，ba...</p></li><li id="r10"><a href="/user/qrodgttx.html"><img src="https://img.haomeiwen.com/ud/3-9a2bcc21a5d89e21dafc73b39dc5f582.jpg" width="80"></a><h3><a href="/subject/dehfaktx.html">2021-01-08</a></h3><p>让低版本IE8浏览器可以兼容网页。 Edge 模式通知 Windows Internet Explorer 以最高...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul><li><a href="/c/mpdytttx.html">前端学习</a></li><li><a href="/c/bpxttttx.html">Web前端之路</a></li><li><a href="/c/mttttttx.html">程序员</a></li></ul><div class="article_by"><div class="bytitle"><p>本文标题：<font color="#666">border-radius兼容低版本ie解决方法</font></p><p>本文链接：<font color="#666">https://www.haomeiwen.com/subject/kfvwlttx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你，所以牵挂"/><span>因为爱你，所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/mpdytttx.html">前端学习</a><a class="meiwen" href="/c/bpxttttx.html">Web前端之路</a><a class="meiwen" href="/c/mttttttx.html">程序员</a><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/xxvwlttx.html">一页纸时间管理法，时间矩阵最大的价值！</a></li><li><a class="meiwen" href="/subject/ztvwlttx.html">他不爱你，才舍得跟你暧昧</a></li><li><a class="meiwen" href="/subject/ntvwlttx.html">简单6步用Axure绘制相机图标（附源文件）</a></li><li><a class="meiwen" href="/subject/gtvwlttx.html">爱情就像六尺巷</a></li><li><a class="meiwen" href="/subject/btvwlttx.html">湖南卫视黑衣人小方走红的背后</a></li><li><a class="meiwen" href="/subject/rtvwlttx.html">晨跑随想</a></li><li><a class="meiwen" href="/subject/xtvwlttx.html">【安卓】ASO终极奥义：看懂安卓关键词排名优化{转}</a></li><li><a class="meiwen" href="/subject/ttvwlttx.html">庸人自扰（一）2</a></li><li><a class="meiwen" href="/subject/zzmwlttx.html">静等花开第15天</a></li><li><a class="meiwen" href="/subject/jzmwlttx.html">时光里缓缓走来</a></li></ul></div><div class="meiwen-right fr mb"><div class="title hd"><h3><a href="/c/mpdytttx.html">前端学习</a></h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/dzbsqttx.html">前端性能优化和测试工具总结</a></li><li><a class="meiwen" href="/subject/zkackttx.html">原生js验证表单的优化—策略者模式</a></li><li><a class="meiwen" href="/subject/pczckttx.html">css之px自动转rem—“懒人”必备</a></li><li><a class="meiwen" href="/subject/ckfhkttx.html">微网站—使用flexible.js实现移动端设备适配</a></li><li><a class="meiwen" href="/subject/zkjhkttx.html">NodeJs本地搭建服务器，模拟接口请求，获取json数据</a></li><li><a class="meiwen" href="/subject/otmkkttx.html">根据屏幕大小，加载不同大小的图片</a></li><li><a class="meiwen" href="/subject/eytlkttx.html">js地址栏传参中文乱码解决</a></li><li><a class="meiwen" href="/subject/bfzrkttx.html">移动端微网站---选择日期（弹出层）</a></li><li><a class="meiwen" href="/subject/vptdkttx.html">微网站—上拉、下拉刷新（重新请求数据）</a></li><li><a class="meiwen" href="/subject/hntdkttx.html">图片的异步加载与onload函数</a></li></ul></div><div class="meiwen-right fr mb"><div class="title hd"><h3><a href="/c/bpxttttx.html">Web前端之路</a></h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/yzkttttx.html">传统 Ajax 已死，Fetch 永生</a></li><li><a class="meiwen" href="/subject/amrttttx.html">安利一个14年撸的轮子 - Node.js 多版本管理器</a></li><li><a class="meiwen" href="/subject/uwuctttx.html">聊聊前端面试那点事儿</a></li><li><a class="meiwen" href="/subject/koqhtttx.html">怎样的页面更易读？</a></li><li><a class="meiwen" href="/subject/yjkrtttx.html">现在很多网站的字号都太小了</a></li><li><a class="meiwen" href="/subject/kijrtttx.html">Web 开发者必上的 10 个网站</a></li><li><a class="meiwen" href="/subject/pnejtttx.html">Web Workers 介绍</a></li><li><a class="meiwen" href="/subject/yzxstttx.html">淘宝前端工程师：国内WEB前端开发十日谈</a></li><li><a class="meiwen" href="/subject/fumetttx.html">免费高清！N个无/少版权限制的大图特供网站</a></li><li><a class="meiwen" href="/subject/ynwetttx.html">表单验证工具－－formFilter</a></li></ul></div><div class="meiwen-right fr mb"><div class="title hd"><h3><a href="/c/mttttttx.html">程序员</a></h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/hicttttx.html">开源 BI 工具 Metabase 简介</a></li><li><a class="meiwen" href="/subject/kzcttttx.html">对象和引用</a></li><li><a class="meiwen" href="/subject/hxhttttx.html">Python中list的实现</a></li><li><a class="meiwen" href="/subject/xuhttttx.html">iOS 开发入门</a></li><li><a class="meiwen" href="/subject/mwhttttx.html">领域驱动设计DDD和CQRS落地</a></li><li><a class="meiwen" href="/subject/exkttttx.html">字符编码的奥秘</a></li><li><a class="meiwen" href="/subject/yzkttttx.html">传统 Ajax 已死，Fetch 永生</a></li><li><a class="meiwen" href="/subject/uvlttttx.html">nodejs中异步</a></li><li><a class="meiwen" href="/subject/axrttttx.html">Web 服务器性能与站点访问性能优化思路</a></li><li><a class="meiwen" href="/subject/ffdttttx.html">mysql & mongo aggregate</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/kfvwlttx.html">border-radius兼容低版本ie解决方法</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息：<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>