Border Collapse differences in FF and Webkit
1850 단어 webkit
border-collapse
. While both browsers render the desired result correctly, their methodology for calculating it differs slightly.Firefox reads it thusly:
the
<table>
itself has border-top-width: 1px
and border-left-width: 1px
each contained <td>
has border-right-width: 1px
and border-bottom-width: 1px
Chrome reads each <td>
as having its own border all the way around.In essence, when it sees
border-collapse
, Firefox revises the properties of each cell in order to remove borders - whereas Chrome keeps the values and just overlaps each border. The effect is the same, just different values at the <td>
level. In both browsers, a <td>
's border will lay on top of the <td>
preceding it (either above or to the left). 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.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
배경색 자동 완성 기법 변경내가 전방 개발자로서 한 프로젝트에서 일할 때 나는 작은 문제에 부딪혔다. 사이트의 배경은 검은색이고 사용자가 입력을 사용할 때 자동으로 완성되면 상자가 하얀색 배경으로 변하는 것을 발견했다. 그래서 나는 구글에서 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.