CSS: Why Is Vertical-Align: Baseline Stop Working on Firefox When Using Overflow: Hidden

vertical-align and inline-block behaving annoyingly different in chrome and firefox

According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not its contents!
So if you apply it to a <span> the <span> becomes aligned with the surrounding text and not whatever is inside it within in.

ispo lorem <span> text </span> due carpe diem

adding span {vertical-align:top; border: 1px solid black} makes <span> text </span> (whole box) become higher than the rest of the text and not push the text to the ceiling of the box <span>.

The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.

For more details click here.

EDIT: apparently if you use vertical-align:top ONLY on the <a> it also works.

css alignment issue with overflow and inlined objects with overflow:hidden

This is a Firefox-specific bug (here's a related question I found when investigating this). The fix seems to be setting vertical-align: top.

Here's an example of the fix, along with some borders added to show elements:

http://jsfiddle.net/vNDmX/5/

button {
    vertical-align: top;
}

Firefox inline-flex with overflow gains whitespace

Resetting vertical-align property fixes this. I guess the issue (the difference in behaviour with Firefox and other browsers) is this line in the spec¹:

The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.

Take a look at the below demo in Firefox and chrome - Firefox treats inline-flex also similar to the way it treats inline-block by using bottom margin as the baseline ²:

.wrapper {  border: 1px red solid;}
ul {  margin: 0;  display: inline-flex;  list-style-type: none;  overflow: auto;  height: 50px;}
li {  flex: 0 1 100px;  margin-right: 10px;  background: #eee;}

<div class="wrapper">  inline  <ul>    <li>One</li>    <li>Two</li>    <li>Three</li>  </ul></div>

Why baseline of `inline-block` element with `overflow:hidden` is set to its bottom margin?

1. What the reason to change baseline of inline-block element from baseline of its line box to bottom margin edge?

The baseline of an 'inline-block' is changed to its bottom margin edge when its overflow property is set to hidden (full specification here).

As for the reason for this decision, I think since the overflown part is hidden, user agents (browsers) may choose to render that overflown part and not display it, or choose to not render it at all. And when the overflown part is not rendered, user agents have no way to tell the baseline of its last line box, as it is not rendered, where it goes is not known.

If the baseline of 'inline-block' whose overflow is set to hidden is still kept as the baseline of its last line box, user agents are forced to render what is hidden to user, which may hinder performance, or at least, put extra restrictions on user agents. What's more, in such case, other inline texts in the same line box are aligned to such a baseline where texts around the overflow-hidden inline-box is hidden, which is kind of stange and not intuitive.

I made a simple demo emulating that inline-block with overflow hidden still has its baseline set to the baseline of its last line box.

var isOverflowHidden = false;document.querySelector('button').onclick = function() {  document.getElementById('inline-box').style.overflow = isOverflowHidden ? '' : 'hidden';  isOverflowHidden = !isOverflowHidden;}

html { background: white; }#inline-box { display: inline-block; height: 18px; }.overflown { color: white; }

<p><button id="toggle">Toggle 'overflow: hidden;' on 'inline-block'</button></p>
<span>  texts sit  <span id="inline-box">    texts in inline-block <br>    <span class="overflown">      line 2 <br>      line 3    </span>  </span>  on baseline</span>

CSS display:flex align-items:baseline not working in Firefox

Here is my article about aligning blocks to their baselines. The example for align-items works ok in Fx except for the bug with overflowed block and paddings, which could be fixed in the same way it is fixed a while later.

However, for your example at http://www.nomadto.com/ things are different: the problem is that when you're doing align-items: baseline, Fx expects to see only inline-content inside, so if you'd replace most nested display: flex with display: inline-flex there, things would be much better. However, as there are a lot of extra wrappers and styles, it is rather hard right now to write you a full patch for fixing stuff, but if you'd create a more simple example somewhere at codepen or jsbin, I could try to fix it to work properly with proper baseline alignment.

---

Related Topics