html – 表格布局：Safari中固定的渲染差异

概述基本上我遇到的问题是在Safari / Chrome中它改变了我的列的宽度,即使我已经指定了a)表格上的宽度,b)表格布局：固定,以及c)我的第一行上的特定宽度添加填充和边框值时,添加到指定表的宽度.在IE7和Firefox 3中,表格呈现相同.但是在Safari / Chrome中,它决定通过从其他列中获取空间来扩大第二列. 有任何想法吗？我有一个very simple sample page, 基本上我遇到的问题是在Safari / Chrome中它改变了我的列的宽度,即使我已经指定了a)表格上的宽度,b)表格布局：固定,以及c)我的第一行上的特定宽度添加填充和边框值时,添加到指定表的宽度.在ie7和firefox 3中,表格呈现相同.但是在Safari / Chrome中,它决定通过从其他列中获取空间来扩大第二列.

有任何想法吗？我有一个very simple sample page,你可以看一下,以及an image显示如何在所有三个浏览器中呈现表格进行比较.

解决方法 在有缺陷的webkits中,table-layout：fixed还为你的表格单元格大小调整：border-Box.浏览器检测的一种替代方法是明确设置Box-sizing：border-Box以获得跨浏览器的一致行为,然后相应地调整宽度和高度(必须增加宽度和高度以包括填充和边框).

#my-table td {  Box-sizing: border-Box;}

总结

以上是内存溢出为你收集整理的html – 表格布局：Safari中固定的渲染差异全部内容，希望文章能够帮你解决html – 表格布局：Safari中固定的渲染差异所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。