加入收藏 | 设为首页 | 会员中心 | 我要投稿 好传媒网 (https://www.haochuanmei.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 产品 > 正文

Border-style:double在IE和FireFox之间的差异

发布时间:2018-09-20 22:13:50 所属栏目:产品 来源:站长网
导读:Css中我们经常使用border属性来实现边框效果。在所有的border-style中,solid一直为我们常用。尽管dotted属性我们也经常用到,但是该属性在IE中效果很差。这篇文章要讨论的是另外一个我们不经常用到的属性:double。 下面是border-style:double属性在IE和F

  Css中我们经常使用border属性来实现边框效果。在所有的border-style中,solid一直为我们常用。尽管dotted属性我们也经常用到,但是该属性在IE中效果很差。这篇文章要讨论的是另外一个我们不经常用到的属性:double。

  下面是border-style:double属性在IE和FF中的截图

Border-style:double在IE和FireFox之间的差异

  FF中border-style:double效果

Border-style:double在IE和FireFox之间的差异

  IE中border-style:double效果


提示:可修改后代码再运行!

  从上面的两张截图中,我们可以很明显的看到double在IE和FF中的差别。在FF中,外边框和内边框始终是等宽的。但在IE中,内外边框并不总是等宽,内边框时而大于外边框,时而小于外边框。对照截图,在ps中仔细观察发现,边框的宽度变化在IE和FF中呈现不同的规律变化。

  IE中border变化规律:

  取得border的宽度值,与3作取余处理。余数为0,则三等分之;余数为为奇数则将其加在外边框上;余数为偶数则将余数除以2分别加在内外边框上。如边框为1,余数为1,商为0,则边框为1;边框为2,余数为2,商为0,则将余数除以2分别加在内外边框上,所以为11。

  FF中border变化规律:

  FF也是将宽度值(值为1除外)与3作取余处理。余数为0,仍三等分之;余数为奇数则加在中间的间距上;余数为偶数则除以2分别加在内外边框上。如边框为2,余数为2,商为0,则边框为11;边框为5,余数为2,商为1,则将余数除以2分别加在内外边框上,所以为212。

  可以看出,边框的数值为3的倍数时在FF和 IE中的效果是一样的。对于其它情况,可以使用方程式3x+2y=z来定义,其中x和y取正整数。

(编辑:好传媒网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读