浏览器如何确定3行中的每行将获得多少像素?以下是一些希望对您有所帮助的案例:
border: 1px double black=> 1,0,0或0,1,0或0,0,1border: 2px double black=> 0,2,0或1,1,0或1,0,1border: 4px double black=> 2,1,1或1,2,1或1,1,2border: 5px double black=> 2,2,1或2,1,2或1,3,1浏览器之间是否存在不一致之处?
我对这个问题最好奇,希望能从可靠的来源得到答案。
从规范中我们可以阅读:
两条平行的实线,中间有一定间隔。(未指定线的粗细,但线的总和与空间必须等于边框宽度。)
因此,基本上没有定义规则,因此每个浏览器都可以使用自己的实现。他们只需要尊重行的总和即可。
附带说明一下,规范并不总是定义确切的行为。这也是另一个与边框有关的问题(如果未设置border-color,它将继承元素的颜色),您可以在其中读取UA来选择自己的算法。
更新资料
对于谷歌浏览器,您可以在此处查看Chromimum源代码:https ://cs.chromium.org/ ,通过一些搜索,您将找到用于绘制边框的组件,BoxBorderPainter并且内部有一个名为的函数DrawDoubleBorder()。如果您研究此代码,则可能会找到所需的内容。
对于Firefox,您可以在此处https://dxr.mozilla.org进行相同的搜索,nsCSSBorderRenderer然后在DrawBorders()函数中找到和。