Kinematics
Well worn.
- Joined
- May 14, 2015
- Messages
- 7,121
- Likes received
- 19,880
So, tabs on QQ always have a problem where, if the tab list is long enough to have two or more lines of tabs, there's a strange offset when you select certain tabs which causes the entire structure to move. Example:
http://imgur.com/7rcaR94
This seems to be a strangeness related to using floats to handle the display of the tabs from the original list items.
However, for a reasonably long time now, we've had an alternative that really handles this sort of things far more elegantly: Flexbox.
http://imgur.com/KgHOIQR
This is handled with a minimal amount of CSS code:
That disables the float, and turns the <ul> into a flexbox with wrap properties. The code is trivial, and it gets rid of a really annoying behavior.
If you want to leave the old float code in for backwards compatibility, you can do so, since the @supports would exclude those browsers that don't support flexbox (mainly IE9 or lower).
Note that while IE 10 and 11 have bugs in flexbox, none of those bugs would affect this particular usage of the feature. (Bugs are mainly dealing with min-height and column orientation.)
http://imgur.com/7rcaR94
This seems to be a strangeness related to using floats to handle the display of the tabs from the original list items.
However, for a reasonably long time now, we've had an alternative that really handles this sort of things far more elegantly: Flexbox.
http://imgur.com/KgHOIQR
This is handled with a minimal amount of CSS code:
Code:
@supports (display: flex) {
.tabs li {
float: none;
}
ul.tabs {
display: flex;
flex-wrap: wrap;
}
}
That disables the float, and turns the <ul> into a flexbox with wrap properties. The code is trivial, and it gets rid of a really annoying behavior.
If you want to leave the old float code in for backwards compatibility, you can do so, since the @supports would exclude those browsers that don't support flexbox (mainly IE9 or lower).
Note that while IE 10 and 11 have bugs in flexbox, none of those bugs would affect this particular usage of the feature. (Bugs are mainly dealing with min-height and column orientation.)