Collapsed table row element bug

Let's take an example: The code is very simple, as follows:

Copy code

The code is as follows:

Thus, a table with two rows and two columns will display correctly in any browser. But if I add the following CSS, the situation will be different:

Copy code

The code is as follows:

It seems that there is a problem, but don't worry, in fact, you can't see any problem from the surface at this time, and the page layout will definitely not be messed up.
You won't see anything overlapping.

I never meant to fool you. Although there is no problem on the surface, let's use the IE Development Tool to tell us what the layout brings.
ccc

Note the differences and similarities between the two images. Note the blue box in the left view. The tool is used to draw a line around an element on the web page when you click on it.
But notice that I clicked on two different elements twice. The wireframe is the same place. Oh my god, I am not seeing things.
Yes, that is to say, the two tr overlap, but the strange thing is that the elements in tr are rendered completely correctly and do not affect any appearance style. Don't think that this is safe, hidden dangers are buried at this time.
I actually encountered this problem when I was making a simulated window. I used a two-row table. The first row was the window title bar, which could be dragged, and the second row was the main view. But later I found that the second row of the table covered the first row. Although it looked normal on the outside, the title bar could not be clicked or dragged because it was blocked.
To fix this problem, remove the position in tr
3. So:
I don't know if you use reset to reset when writing CSS. Anyway, I do it this way. The CSS template in my NetBeans has reset. There is a section like this at the head of each CSS file:

Copy code

The code is as follows:

/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 12px;
vertical-align: baseline;
background: transparent;

}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}
/* The style of the element when it gets focus! */
:focus {
outline: 0;
}
/* Special text style! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* Thin line table style */
table {
border-collapse: collapse;
border-spacing: 0;
}

Everyone knows that to absolutely position an element, you must first position its parent element, such as setting a position:relative, so that the child element can be absolute, and then top and left position.

So I thought, this is too much trouble, I might as well set position:relative for all elements, and then change position:absolute for absolute positioning. This way I don't have to set them one by one, and all elements can be absolutely positioned directly.

So here comes the problem mentioned in this article. We set position:relative for all elements, so the table has problems. So this approach is not advisable, and it will cause some other rendering problems. I remember seeing prompts in several places saying that this setting cannot be used.

This article is actually about layout, but this problem is indeed a bug in IE, not a layout problem. I will talk about layout next time when I encounter a layout problem. By the way, this is a really strange bug.

<<: How to configure multiple projects with the same domain name in Nginx

>>: How to ensure that every page of WeChat Mini Program is logged in