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

发布时间：2018-09-17 00:59:52 所属栏目：运营来源：站长网

导读：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结果

<!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取正整数。

（编辑：河北网）

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

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要