表格布局：在Safari中的固定渲染差异 [英] Table-layout:fixed rendering differences in Safari

问题描述

基本上，我的问题是，在Safari / Chrome它正在改变我的列的宽度，尽管我已经指定了a）在表上的宽度，b）table-layout：fixed，和c）第一行，当添加填充和边界值时，加到指定的表的宽度。在IE7和Firefox 3中，呈现的表是相同的。但在Safari / Chrome中，它决定通过从其他列中占用空间来增加第二列。

任何想法？我有一个非常简单的示例页，您可以查看，以及图片，显示如何在所有三个浏览器中呈现表格以进行比较。

<环顾四周，我认为这是由以下webkit错误造成的： 13339 和 18565 。基本上，它是如何使用边框和填充值计算最终宽度的列的问题。

我最后做了一些浏览器嗅探和设置一些不同的css值基于webkit浏览器，使最终渲染与FF和IE相同。

Basically the problem I have is that in Safari/Chrome it is changing the width of my columns even though I have specified a) a width on the table, b) table-layout:fixed, and c) specific widths on my first row that when added with the padding and border values add up to the width of the table specified. In IE7 and Firefox 3 the table is rendered the same. But in Safari/Chrome it decides to make the second column bigger by taking space from the other columns.

Any ideas? I have a very simple sample page that you can look at, as well as an image showing how the table is rendered in all three browsers for comparison.

解决方案

After looking around, I think that this is caused by the following webkit bugs: 13339 and 18565. Basically a problem with how it uses the border and padding values in calculating the final width of the columns.

I ended up doing some browser-sniffing and setting some different css values based on that for webkit browsers so that the final rendering was the same as FF and IE.

这篇关于表格布局：在Safari中的固定渲染差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！