Collapsed table row element bug

Collapsed table row element bug
Let's take an example: The code is very simple, as follows:

Copy code
The code is as follows:

<table border="1">
<tr>
<td>dd</td>
<td>dds</td>
</tr>
<tr>
<td>ss</td>
<td>sss</td>
</tr>
</table>

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:

<style>
tr{position: relative;}
</style>

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.
ccccccc
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

Recommend

Detailed tutorial on installing SonarQube using Docker

Table of contents 1. Pull the image 1.1 Pull the ...

Summary of methods for finding and deleting duplicate data in MySQL tables

Sometimes we save a lot of duplicate data in the ...

Detailed explanation of common operations of Docker images and containers

Image Accelerator Sometimes it is difficult to pu...

Detailed tutorial on deploying apollo with docker

1. Introduction I won’t go into details about apo...

Solution to mysql server 5.5 connection failure

The solution to the problem that mysql cannot be ...

How to simulate network packet loss and delay in Linux

netem and tc: netem is a network simulation modul...

What does mysql database do

MySQL is a relational database management system ...

An example of vertical centering of sub-elements in div using Flex layout

1. Flex is the abbreviation of Flexible Box, whic...

Analysis of Linux configuration to achieve key-free login process

1.ssh command In Linux, you can log in to another...

Tutorial on how to create a comment box with emoticons using HTML and CSS

HTML comment box with emoticons. The emoticons ar...

How to use js to determine whether a file is utf-8 encoded

Conventional solution Use FileReader to read the ...