Folded table row element bug

Time:2021-8-24

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>

In this way, a table has two rows and two columns, and there is no display error in any browser. However, if I add the following CSS, the situation is different:

Copy code

The code is as follows:

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

It seems that something is going to go wrong, but don’t worry. In fact, you can’t see any problems on the surface at this time, and the page layout will never be disordered,
You can’t see anything overlapping

I have never thought of playing tricks on you. Although I can’t see the problem on the surface, let’s play our IE development tool now. It will tell us what layout brings
ccc cccc
Pay attention to the differences and similarities in the two pictures. Pay attention to the things circled by the blue line in the left view. The function of this tool is to click an element on the right to frame it in the web page
But notice that I clicked on two different elements twice. The line frame is the same place. I sweat. Am I right
Yes, that is to say, the two TRS 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 it’s safe. The hidden danger is buried at this time
I actually encountered this problem when making a simulation window. I used a two-line table. The first line is the window title bar, which can be dragged, and the second line is the main view. Later, I found that the second line of the table covers the first line. Although it looks normal, the title bar can not be clicked and dragged because it is blocked
To fix this phenomenon, remove the position in tr
3. Thus:
I don’t know if you use some resets to reset when writing CSS. Anyway, I do so. Reset is stored in the CSS template in my NetBeans. There is such a paragraph in the header 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 when the element 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;
}

As we all know, to absolutely locate an element, first locate its parent element, for example, set a position: relative, so that the child element can be absolute, and then locate top and left

So I thought, it’s too troublesome. I just set position: relative for all elements, and then change position: absolute for absolute positioning. In this way, all elements can be absolutely positioned without setting one by one

So the problem mentioned in this article comes. We set position: relative for all elements, so there is a problem with the table. Therefore, this approach is not advisable, and it will cause some other rendering problems. I remember I saw hints in several places that this setting cannot be done

This article actually wants to talk about layout, but this problem is really an IE bug, not a layout problem. I’ll talk about layout next time when I encounter a layout problem. By the way, this is really a strange bug

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]