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

发布时间：2018-09-14 10:16:48 所属栏目：产品来源：站长网

导读：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中的截图：

　　FF中border-style:double效果

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

　　IE中border-style:double效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Border-style:double在IE和FF之间的差异</title> <style> body{text-align:center;} .wrapper{ width:960px; margin:0 auto;text-align:left;} h1{border-bottom:2px solid #000;margin-bottom:10px;text-align:center;} .border{border-style:double;border-color:#f00; margin:5px 50px;padding:10px;} .border_1{border-width:1px;} .border_2{border-width:2px;} .border_3{border-width:3px;} .border_4{border-width:4px;} .border_5{border-width:5px;} .border_6{border-width:6px;} .border_7{border-width:7px;} .border_8{border-width:8px;} .border_9{border-width:9px;} .border_10{border-width:10px;} </style> </head> <body> <div class="wrapper"> <h1>Border-style:double在IE和FF之间的差异</h1> <div class="border border_1">border宽度为1 像素。</div> <div class="border border_2">border宽度为2 像素。</div> <div class="border border_3">border宽度为3 像素。</div> <div class="border border_4">border宽度为4 像素。</div> <div class="border border_5">border宽度为5 像素。</div> <div class="border border_6">border宽度为6 像素。</div> <div class="border border_7">border宽度为7 像素。</div> <div class="border border_8">border宽度为8 像素。</div> <div class="border border_9">border宽度为9 像素。</div> <div class="border border_10">border宽度为10 像素。</div> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

　　从上面的两张截图中，我们可以很明显的看到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取正整数。

（编辑：烟台站长网）

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

消息称Zen4锐龙7000处	高通三个新字泄露玄
第一款配备金属中框的	卢伟冰深夜预热Redmi