`
jetdan
  • 浏览: 5481 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

IE8 下切圆角

    博客分类:
  • css
阅读更多
最近被拉去开发一个小系统,人手不够当起了前台。 好不容易找了个美工帮忙画了个UI,结果人家图也没切,悲剧的是我本地photo shop也没装。

但是自己一看布局,基本上用颜色+圆角可以搞定,但是忽然想起了貌似圆角是css3的特性。 而我们的系统至少要支持IE8。 然后查了一下,果然,IE8不支持css3。

网上查了各种方法,最简单的是图片拼接的,什么滑动门、九宫格。这一想,前台真苦逼,用户看上去一个圆角方块,原来还得自己手工拼。 那有没有偷懒的方法?

偶然找到了:http://fetchak.com/ie-css3/

.demo {
  border-radius: 15px;
  behavior: url(ie-css3.htc);
}

大概是这么个意思,ie6、7、8认得 behavior ,执行ie-css3.htc的脚本,其实里面也是一段javascript,用VML画成圆角。 VML牛逼,以前用到highcharts的时候因为旧版的ie不支持SVG的原因,highcharts会把它转化成VML,虽然这个玩意儿性能很挫(相对于画上几千个点)。 但是不得不惊叹IE那么早就有一个矢量绘图标记了。 用VML画四个圆角,当然看不出卡顿。

一试,结果坑爹了,什么要注意position要relative或者absolute的,z-index要够大……
好吧,忍了,我都改了,结果尼玛画出来的圆角矩形居然偏移位置了。

但是还是不想放弃这偷懒的方式,又找到了更为出名的PIE
http://css3pie.com/
一看人家官网就专业很多,因为出了支持css3的特性,还支持css3选择器部分功能(可与jQuery之类的写作)

把ie-css3.htc换乘PIE.htc,果然ok了,也没用relative或absolute position,也没调z-index,都没问题了。 就是PIE.htc大了点,要四十几KB。 但是搞定就ok~ 
分享到:
评论

相关推荐

    解决IE浏览器图片圆角

    在互联网的早期,由于浏览器兼容性问题,开发者经常面临各种挑战,其中之一就是在IE6到IE8这些较旧版本的浏览器中实现图片的圆角效果。标题"解决IE浏览器图片圆角"指向的就是这个历史问题以及如何克服它。在这个时代...

    支持IE6,IE7,IE8矩形圆角的实例

    在早期的Internet Explorer浏览器,即IE6、IE7和IE8,它们并不支持CSS3中的许多新特性,其中就包括了实现矩形元素圆角的方法。然而,开发者们通过一些技巧来模拟圆角效果,使得这些旧版IE浏览器也能呈现出类似的效果...

    IE6等各种浏览器兼容圆角

    这是最传统的解决办法,通过将元素的背景切分为四个部分,每个部分对应一个角落的圆角,然后将它们拼接在一起。这种方法适用于所有浏览器,但维护成本高,不适合响应式设计。 5. PIE (CSS3 Pie) CSS3 PIE是一个...

    css3圆角兼容火狐、IE和webkit

    同时,对于IE8及以下版本,可以使用VML(Vector Markup Language)或者图片切片技术来模拟圆角效果。 ```css element { -ms-border-radius: top-left top-right bottom-left bottom-right; /* IE9+支持,但IE8...

    div的圆角的制作,兼容FF, IE等浏览器

    - 对于IE8及更低版本,可以使用VML(Vector Markup Language)来模拟圆角。这需要使用JavaScript库,如`border-radius.js`,或者手动编写VML代码。 - 对于IE9,它支持CSS3的`border-radius`,但需要添加`-ms-`...

    css 圆角样式

    8. **动画和过渡**:圆角也可以作为CSS3动画和过渡的目标属性,实现动态改变圆角效果,增强用户体验。 9. **响应式设计**:在响应式网页设计中,圆角样式可以帮助元素在不同设备和屏幕尺寸下保持视觉一致性。通过...

    div+css 解决ie6兼容问题总汇

    5. **背景闪烁**:IE6下,当链接或按钮使用CSS精灵作为背景时,可能遇到背景闪烁的问题。通过JavaScript的`document.execCommand("BackgroundImageCache",false,true);`可以缓存背景图,减少闪烁。 6. **最小高度**...

    纯css实现边框圆角效果

    但在一些较旧的浏览器,如IE8及以下,可能需要使用额外的技巧,如使用图片或者渐进增强的策略来实现类似的效果。 此外,`border-radius`还可以与其他CSS属性结合使用,例如`box-shadow`(盒阴影)和`background-...

    好看的CSS按钮(兼容IE6)

    IE6尽管已经过时,但在某些环境下可能仍需支持。下面我们将深入探讨如何利用CSS实现这一目标。 首先,我们来看`style.css`文件,它是定义按钮样式的关键。在CSS中,我们可以使用`<button>`或`<input type="button">...

    ie兼容Css3属性

    5. **内切圆角(Inset Border Radius):** 在某些场景下,可能需要对内边距或边框进行圆角处理,这是IE浏览器不支持的,PIE可以通过设置特定参数实现。 6. **饼图效果(Pie Chart):** 通过巧妙的CSS和PIE,可以在IE...

    兼容IE的C3

    IE(Internet Explorer)浏览器,尽管在现代已经逐渐被Chrome、Firefox等其他浏览器取代,但在过去很长一段时间内,尤其是IE8及以下版本,其对CSS3新特性的支持并不完善。"兼容IE的C3"是一个解决此类问题的技术方案...

    Android自定义控件之圆形、圆角ImageView

    圆角矩形的四个角会自动变成圆角,从而实现圆角ImageView的功能。 总结来说,Android自定义控件允许开发者根据特定需求定制UI组件,提高代码的灵活性和可维护性。在本例中,通过自定义`ImageViewPlus`,我们解决了...

    CSS3完美支持IE圆角阴影样式特效代码

    本文将详细讲解如何利用CSS3来实现IE浏览器下的圆角和阴影特效,以及如何结合jQuery实现更完美的兼容性。 首先,CSS3的`border-radius`属性允许我们创建具有圆角的元素,而不再需要使用复杂的图片切片或者...

    android自定义imageview实现圆角图片

    xml version=1.0 encoding=utf-8?> <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:app=http://schemas.android.com/apk/res-auto android:orientation=

    border-radius以外的CSS圆角边框制作方法

    然而,由于某些老版本浏览器(如IE8及以下)不支持border-radius属性,因此需要寻找其他方法来实现圆角边框的效果。 首先,我们介绍利用CSS3的border-radius属性来制作圆角边框。示例如下: ```css #round { ...

    CSS3 圆角效果

    然而,需要注意的是,Internet Explorer(包括IE8及以下版本)并不支持`border-radius`属性,因此对于这些浏览器,圆角效果将不会显示。为了确保向后兼容,开发者可能需要使用JavaScript库(如jQuery的`.css()`方法...

    CSS3 完美实现圆角效果

    虽然`border-radius`在现代浏览器中广泛支持,但老版本的Internet Explorer(IE8及以下)并不支持此属性。为了向后兼容,可以使用条件注释或者渐进增强的策略,使用JavaScript库如jQuery UI的`.corner()`方法,或者...

    IE6兼容性问题及IE6常见bug详细汇总

    **圆角问题**:IE6不支持CSS3圆角,可以使用图片切片实现圆角效果,或者放弃在IE6上的圆角呈现。 **背景闪烁**:IE6下的背景图在`hover`时可能会闪烁,可以通过JavaScript命令`document.execCommand(...

    div+css无图边框圆角实现思路及代码

    然而,在不支持CSS3的浏览器中,如IE6、7,我们不能直接使用`border-radius`。这时,我们可以采用一种叫做“切角”或者“嵌套元素”的技术来模拟圆角效果。这种方法是通过创建多个内嵌的`<b>`标签,利用不同的边距和...

Global site tag (gtag.js) - Google Analytics