软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > Border-style:double在IE和FireFox之间的差异

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

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

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

  FF中border-style:double效果

  IE中border-style:double效果


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

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

  IE中border变化规律:

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

  FF中border变化规律:

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

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

    相关阅读
    网友评论
    栏目导航
    推荐软件