Developer Tools are so buggy: It’s sufficient to rotate some suggested css values that Firefox does forget how to render it:
Just to help you:
Touching display: table; or display: inline-table; destroys all succeeding block displays!
Hey!
Thanks for your message!
Do you have some code online we can inspect to reproduce the problem on our side?
Thanks a lot!
Julien
No!
But I love to do your job. That’s why I added a fully not working example
(WHY CAN’T I ATTACH HTML FILES???):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
tr.link>td:not(.nolink) {height: 100%;padding: 0;}
tr.link>td:not(.nolink)>a[href] {display: block;height: 100%;}
.table tr.link>td:not(.nolink)>a[href] {padding: 0.75em;}
.table-sm tr.link>td:not(.nolink)>a[href] {padding: 0.3em;}
</style>
</head>
<body>
<div class="container-fluid">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Link</th>
<th>Text</th>
<th>Other</th>
</tr>
</thead>
<tbody>
<tr class="link">
<td><a href="https://mozilla.org">mozilla.org</a></td>
<td><a href="https://mozilla.org">Live your life. Own your life.</a></td>
<td><a href="https://mozilla.org">mozilla.org</a></td>
</tr>
<tr class="link">
<td><a href="https://example.com/">example.com</a></td>
<td><a href="https://example.com/">This domain is established to be used for illustrative
examples in documents. You may use this domain in examples without prior coordination or
asking for permission</a></td>
<td class="nolink">0123456789 ABCDEFGHIJKLMOPQRSTUVQXYZ <a
href="https://example.com/">example.com</a>
ABCDEFGHIJKLMOPQRSTUVQXYZ 0123456789</td>
</tr>
<tr class="link">
<td><a href="https://www.iana.org/domains/reserved">Example domains - As described in RFC 2606
and RFC 6761,
a number of domains such as example.com and example.org are maintained for documentation
purposes.
These domains may be used as illustrative examples in documents without prior
coordination with us.
They are not available for registration or transfer.</a></td>
<td><a href="https://www.iana.org/domains/reserved">https://www.iana.org/domains/reserved</a>
</td>
<td class="nolink">0123456789 ABCDEFGHIJKLMOPQRSTUVQXYZ <a
href="https://example.com/">example.com</a>
ABCDEFGHIJKLMOPQRSTUVQXYZ 0123456789</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The goal was: Add full link support to complete table cell. Again: I tried do cover the complete cell with <a href="...">...</a>!
In Chrome I could achieve that with td {height: 0;}, see suggestion https://stackoverflow.com/questions/3542090/how-to-make-div-fill-td-height#3542470.
By the way: Without <!DOCTYPE html> it works in Firefox.
This is actually not a bug in the DevTools but in the rendering engine. I’ve reduced your test case further and filed bug 1570166 so it can get fixed.
As you already mentioned in your initial post, the cause of this error is switching the display value to table / inline-table and then back to block (or some other value with block layout).
But I love to do your job. That’s why I added a fully not working example
(WHY CAN’T I ATTACH HTML FILES???)
As another user affected by that I can understand your frustration, but please let’s keep such conversations calm, objective and collaborative!
It’s simply not possible to reproduce a bug without a test case and it’s just much easier for the reporter to come up with one (as they are already experiencing the bug) than for the person that is meant to fix it.
Sebastian