Ciao.
Riscontro un fastidioso problema di rendering di questa banale paginetta, ma solo su Chrome (sia mobile che desktop) e Edge (FireFox e IE visualizzano correttamente).
Qualcuno sa capire come mai?
Premetto che il markup è frutto dell'elaborazione di un sistema di reportistica (dal quale ho rimosso tutta la fuffa, visto che non è quella a causare il problema), quindi non posso farci alcunché, ma rimane la curiosità di capire se mi trovo di fronte ad un "bug" dei due browsers o cosa.
Mi aspetterei di vedere a video una banale tabella con 5 celle azzurre bordate di nero (la classica header di una tabella di report).
Invece, su Chrome e Edge compare una riga dopo l'ultima cella (sembra il prolungamento del bordo superiore della tabella).
Tramite i DevTools sono riuscito a capire che a produrre quel difetto è il bordo superiore della penultima cella (chiamata "% Target" che, di diverso dalle altre, spanna su due colonne).
Qualcuno riesce a capire il perchè di questo effetto?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Esempietto</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%"> </td>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 714pt; border-collapse: collapse; background-color: white;">
<tr valign="top" style="height:20px">
<td style="width:24pt"></td>
<td style="width:48pt"></td>
<td style="width:132pt"></td>
<td style="width:120pt"></td>
<td style="width:60pt"></td>
<td style="width:24pt"></td>
<td style="width:156pt"></td>
<td style="width:150pt"></td>
</tr>
<tr valign="top" style="height:24pt">
<td colspan="8"></td>
</tr>
<tr valign="top" style="height:36pt">
<td></td>
<td colspan="4" style="text-indent: 0px; vertical-align: middle;text-align: left;">
<div style="padding-left:2px;padding-right:2px;">
<span style="font-family: SansSerif; color: #000000; font-size: 18pt; line-height: 1; *line-height: normal;">Situazione target provvigioni anno : 2021</span>
</div>
</td>
<td colspan="3"></td>
</tr>
<tr valign="top" style="height:60.000004pt">
<td></td>
<td style="background-color: #BFE1FF; border: 1.2pt solid #000000; text-indent: 0px; vertical-align: middle;text-align: center;">
<span style="font-family: SansSerif; color: #000000; font-size: 16.800001pt; line-height: 1.2578125;">Trim</span>
</td>
<td style="background-color: #BFE1FF; border: 1.2pt solid #000000; text-indent: 0px; vertical-align: middle;text-align: center;">
<span style="font-family: SansSerif; color: #000000; font-size: 16.800001pt; line-height: 1.2578125;">Target</span>
</td>
<td style="background-color: #BFE1FF; border: 1.2pt solid #000000; text-indent: 0px; vertical-align: middle;text-align: center;">
<span style="font-family: SansSerif; color: #000000; font-size: 16.800001pt; line-height: 1.2578125;">Provvigioni</span>
</td>
<td colspan="2" style="background-color: #BFE1FF; border: 1.2pt solid #000000; vertical-align: middle;text-align: center;">
<span style="font-family: SansSerif; color: #000000; font-size: 16.800001pt; line-height: 1.2578125;">% Target</span>
</td>
<td style="background-color: #BFE1FF; border: 1.2pt solid #000000; text-indent: 0px; vertical-align: middle;text-align: center;">
<span style="font-family: SansSerif; color: #000000; font-size: 16.800001pt; line-height: 1.2578125;">Mancano</span>
</td>
<td></td>
</tr>
<tr valign="top" style="height:241.20001pt">
<td colspan="8"></td>
</tr>
</table>
</td>
<td width="50%"> </td>
</tr>
</table>
</body>
</html>