关于box-sizing:border-box;布局的问题

大狗狗 2018-09-24 12:53:48



<!doctype html>

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<TITLE>边框测试</TITLE>



<STYLE type="text/css">

body{margin:0;padding:0;font-family:verdana,tahoma, arial, sans-serif; }

</STYLE>

</HEAD>

<BODY>



<div style='border:#f00 solid 1px;width:200px;height:100px;margin:50px;'>

<table style='border-collapse:collapse;table-layout:fixed;width:200px;box-sizing:border-box;'>

<tr>

<td style='width:100px;height:100px;border-right:#00f solid 1px;box-sizing:border-box;'> </td>

<td style='width:100px;height:100px;box-sizing:border-box;'> </td>

</tr>

</table>

</div>



</BODY>

</HTML>

如上面代码，第一个td设了右边框。按理说td可用宽度应是99（box-sizing:border-box;布局下边框要占用尺寸），但经我测量第一个td可用宽度是100，而右边那个没边框的td宽度反倒只有99。

哪位知道其中原理？

...全文

740 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

大狗狗 2018-09-25

打赏
举报

楼上朋友好，在浏览器的调试器里，显示的数据都是正常的。但如果不用调试器，而是直接截屏放到画图程序中再放大，会发现：
在IE（9）和chrome里，左边实际尺寸为100，右边为99.
在fireFox里，左边实际尺寸99，右边100.

也就是说，fireFox是理论和实际一致的。

zc_1994 2018-09-25

打赏
举报

,不知道你是怎么测量的，刚刚复制你的代码，显示左边宽度是99，我把你的代码改了一点点，只是为了看的明显一点，body{margin:0;padding:0;font-family:verdana,tahoma, arial, sans-serif; }改成了*{margin:0;padding:0;font-family:verdana,tahoma, arial, sans-serif; }

大狗狗 2018-09-25

打赏
举报

关于单线边框的参考文章：
https://blog.csdn.net/cengjingcanghai123/article/details/51296431

大狗狗 2018-09-25

打赏
举报

问题基本解决了。解决过程：
为了看的更清楚，我把代码里边框宽度设为了5px。但是在fireFox的设计器中，我发现浏览器给出的CSS数据是：border-right-width:3px;经过考虑，我认为是border-collapse:collapse;所致，这句代码是问题根源。因为浏览器要整合边框，所以整合后宽度是多少那浏览器自己说了算。这也就导致实际显示效果的差异。

解决办法就是不使用]border-collapse:collapse;单线边框还有其它方法的：



<!doctype html>

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<TITLE>边框测试</TITLE>



<STYLE type="text/css">

body{margin:0;padding:0;font-family:verdana,tahoma, arial, sans-serif; }

</STYLE>

</HEAD>

<BODY>



<div style='border:#f00 solid 1px;width:300px;height:100px;margin:50px;'>

<table style='table-layout:fixed;width:300px;box-sizing:border-box;border-spacing:0;'>

<tr>

<td style='width:100px;height:100px;border-left:none;border-top:none;border-right:#00f solid 1px;box-sizing:border-box;margin:0;padding:0;background-color:#0ff;'> </td>

<td style='width:100px;height:100px;border-left:none;border-top:none;border-right:#00f solid 1px;box-sizing:border-box;margin:0;padding:0;background-color:#0ff;'> </td>

<td style='width:100px;height:100px;border-left:none;border-top:none;border-right:0;box-sizing:border-box;margin:0;padding:0;background-color:#0ff;'> </td>

</tr>

</table>

</div>



</BODY>

</HTML>