<del> shows no line-through due to children's inline-flex
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: stefan, Unassigned)
References
()
Details
(4 keywords)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0
Steps to reproduce:
I have a <del> element with an <a> element in it. The <a> element has a CSS property display inline-flex.
https://codepen.io/rakker/pen/rPyoBG
Actual results:
The <del> element shows no line through text decoration anymore which is caused by the inline-flex style from it's parent. If I change the <a> to, for example a <span>, it has the same outcome.
Expected results:
The <del> element still should render the line through text decoration, like other common browsers.
Tested in Firefox 65.0 on a Windows machine.
|
||
Comment 1•7 years ago
|
||
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0
20190201221223
|
||
Comment 2•7 years ago
|
||
inline-flex is like inline-block, which is an atomic inline item, which is skipped by decoration lines by default (CSS Text Decoration L4 provides text-decoration-skip which allows not skipping it, but no browser currently implements it), so text inside inline-flex wouldn't get decoration line from its ancestor.
Other browsers show a decoration line basically because they haven't implemented the correct way to render decoration lines (i.e. they still make decoration lines inherited).
Description
•