关于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。

哪位知道其中原理?
...全文
662 4 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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>

这样一来,理论值和实际值完全相同,而且在各种浏览器下表现也一致。

结论:
如果你想精确控制td尺寸,请不要使用border-collapse:collapse;来实现单线边框。

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧