Cell border width problem caused by overlapping table borders_html/css_WEB-ITnose

I accidentally took a look at the CSS written by others. In the comments, it was said that when the table element border is collapsed (collapsed, overlapped, which word is appropriate?), different browsers calculate the cell border. It's different, and then I wrote the link address Border Collapse differences in FF and Webkit in the comments; for a stubborn technical man, I really can't sleep without digging into it.

I opened the URL angrily (every time I was very angry, and it often opened very slowly due to various reasons), and I clarified my thinking. It turns out that the general meaning is: although they handled it differently, the final result was The interface is the same. Then I slowly thought about it, and it seems that Firefox handles collapse according to the meaning of "collapse", and webkit handles it according to the meaning of "overlap (or folding)".

In this case, the English title is really difficult to translate. How to translate it, the difference between FF and webkit when dealing with border overlap? Please, webkit is presented in terms of overlap; and if it is translated as "collapse", firefox is presented in terms of collapse. Suddenly there is a phenomenon in software patents: ideas are not protected, only expressions are protected.

The css layout of the page is as follows:

table {    table-layout: fixed;    width: 960px;    border-collapse: collapse;    border-spacing: 0;}td {    padding: 2px;    height: 22px;    border: 1px solid gray;}

Then attach the simple HTML test code:

<table>    <tbody>    <tr>        <td>I'm td1</td>        <td id="td2">            I'm td2        </td>    </tr>    </tbody></table>

Finally, the results calculated using getComputedStyle(td2).borderLeftWidth are really different. It is 1px under webkit and 0px under firefox. However, IE can only use td2.curretStyle.borderLeftWidth. The result is consistent with webkit. From this point of view, webkit and IE should be on the same path. Good friends must have an affair.

There are so many trivial matters, but one picture can understand it instantly.

----------------------------------------- ------

When you are bored, just use code to comfort you;