边框折叠FF和Webkit中的差异 [英] Border Collapse differences in FF and Webkit

问题描述

我有一个包含以下规则的表格：

 < table cellspacing =0cellpadding =0style =table-layout：fixed; 
 width：1000px; border-collapse：collapse; border-spacing：0> 
  

，且单元格具有以下CSS：

  td {
 padding：4px; 
 height：22px; 
 border：1px solid gray; 
} 
  

我的表单元格的计算样式类似于下面的FF： p>

  padding-top 4px 
 padding-right 4px 
 padding-bottom 4px 
 padding- 
 border-top-width 0 
 border-right-width 1px 
 border-bottom-width 1px 
 border-left-width 0 
  
 
 
 
，而在webkit上，它看起来像这样：
  padding-bottom：4px; 
 padding-left：4px; 
 padding-right：4px; 
 padding-top：4px; 
 border-bottom-width：1px; 
 border-left-width：1px; 
 border-right-width：1px; 
 border-top-width：1px; 
  
由于某些原因，以下两个属性有所不同：
  border-top-width 
 border-left-width 
  
这是一个已知的问题吗？任何可能的解决方案的问题?? 
解决方案
 Derrylwc，这不是完全正确 - 效果是不一样的。 Firefox会在单元格上方（对于border-top）的底部添加一个1像素的边框，如果没有顶部或左边的单元格，则向左边的单元格（如右边框）添加1像素的边框。 
 
 
 
虽然这可能不适用于仅在网页加载时呈现的表格，但是对于动态更改表格（如隐藏/显示具有边框的行），这是值得注意的，因为它会更改单元格上方的高度或左侧单元格的宽度为-1px（由于计算td高度和宽度的方式），因此导致从原始大小调整大小。
 
 
 
应该有一个标准的计算方法，不幸的是对于动态表，firefox方法并没有真正的工作。 
 
 
 
要解决这些问题，请删除border-collapse并添加border-spacing：0。
 
I have a table with the following rules :
    <table cellspacing="0" cellpadding="0" style="table-layout:fixed;
width:1000px;border-collapse:collapse;border-spacing:0">
and the cells have the following CSS:
td{
padding:4px;
height:22px;
border:1px solid gray;
}
The computed style for my table cells looks like the following in FF:
padding-top 4px
padding-right   4px
padding-bottom  4px
padding-left    4px
border-top-width    0
border-right-width  1px
border-bottom-width 1px
border-left-width   0
whereas on webkit, it looks like this:
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
For some reason, there is a difference in the following two properties:
border-top-width
border-left-width
Is this a known issue ? Any possible solutions to the problem ??
解决方案
Derrylwc, thats not exactly correct - the effect is not the same. Firefox adds a 1px border to the bottom of the cell above (for border-top) and 1px to the right of the cell to the left (for border-right) or to the table if there is no cell to the top or left.

Whilst this may not be noticle for tables rendered only at page load, for dynamically changing tables like hiding / showing a row which has a border this is noticable because it changes the height of the cell above or the width of the cell to the left by -1px (due to the way td heights and widths are calculated) and therefore causes noticable resizing from the original.

There should be a standard way of calculating these, and unfortunately for dynamic tables, the firefox method doesn't really work. It renders the border-collapse option useless.

To overcome these, remove border-collapse and add border-spacing: 0.

                        
这篇关于边框折叠FF和Webkit中的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！