Geek Answers Handbook

Is there a way to bypass CSS for one of Firefox's crawl content errors?

Here is the fiddle with my code: http://jsfiddle.net/kizu/GCahV/ (compare it with Firefox and any other modern browser)

What I want to achieve:

  • There must be a built-in unit (or at least unit c float) with two parts: left and right.
  • These parts must be side by side and must be flexible, the right part may be absent altogether.
  • The parent block must have some max-width(in %or fixed in px).
  • If the left side is large enough, it should be full, but you should always show the right part.

Using inline-block, floatand overflow: hidden, I did it well in the latest browsers Chrome, Safari and Opera, but I was struck by the fact that Firefox has an error: the left side is compressed when the right side is long.

The only CSS workaround I found was to try the position elements for Fx in the flex-box model, but this is not ideal: I could not get the parent to have max-width(or widthat all).

Here is my best attempt: http://jsfiddle.net/kizu/GCahV/1/

So the questions are:

  • Is there a way to understand Firefox max-widthfor .b-shrinker?
  • Is there any other CSS way just for this Firefox error or a completely different way to do what I want?
+5
2

, , flexbox, : http://dabblet.com/gist/4701626

, Fx , , .

, , :

.b-wrapper_fixed .b-shrinker__in {
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-direction : reverse;
    }
.b-wrapper_fixed .b-shrinker__left {
    white-space: normal;
    word-break: break-all;
    -moz-box-flex: 1;   
    height: 1.2em;
    }
.b-wrapper_fixed .b-shrinker__right {
    -moz-box-flex: 1;   
    }

flexboxy, white-space:normal word-break: break-all, , . , height set.

, , , - - .

0
+1

More articles:


All Articles