Strange Border-Width Behavior in Chrome - Floating Point Border-Width

Strange border-width behavior in Chrome - Floating point border-width?

To reproduce your problem I have to change the zoom-level of Chrome. Changing the zoom-level back to 100% fixes it. It appears to be a bug, the calculated border width is always smaller than the defined border width, zooming in or out!

Your 10px border does give a value of 10 when the zoom-level is 110%, but on 125% it has the same problem as your 3px border.

edit: firefox has the same behavior!

CSS Floating Bug in Google Chrome

It seems to be a bug. The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.

According to the W3C specs regarding the clear property:

This property indicates which sides of an element's box(es) may not be
adjacent to an earlier floating box. The 'clear' property does not
consider floats inside the element itself or in other block formatting
contexts.

So it shouldn't effect the children's floating behaviour. I filed a bug report at Chrome about this issue.

Update: From the link in the comments, kjtocool mentioned on 30-03-2013:

It appears that this issue has been corrected in version 26.0.1410.43

Children floating using percentages does not fill container 100% in Chrome

I see your problem. I guess it's rounding all the percentages the same way, so you have a noticeable change in total width when you float them next to each other.

In order to keep it to a maximum 1px total error, I'd make sure that all the right edges are defined from the main container and the last one touches the right edge, instead of relying on the browser compensating for rounding error. Check this out:

http://jsfiddle.net/9nZYt/1/

.progress {
    position:relative;
    border: 1px solid black;
    box-sizing: border-box;
}
.progress .bar {
    position:absolute;
    left:0;
    border-right: 1px solid white;
}
.progress .bar:first-child {
    border-right:none;
}

.progress .bar.bar-remaining {
    filter: none;
    background: red;
}

and

<div class="progress">
    <div class="bar bar-remaining" style="width: 100%"></div>
    <div class="bar bar-remaining" style="width: 75%"></div>
    <div class="bar" style="width: 50%"></div>
    <div class="bar" style="width: 25%"></div>
</div>

You could target the individual divs with CSS's nth-child selector instead of hard-coding widths or special classes in your markup.

But it's still a bit ugly in my opinion, and you'll have to play a bit to get your rounded corners looking right again.

What about drawing it on a HTML5 Canvas and using this html-based version as a fall-back?

edit: I don't know anything about bootstrap, but hopefully this is still applicable!

chrome padding percenage + width percentage not adding together

If you use 100% in CSS2 it means that the final width of the element (not the CSS width) will be: border-left + padding-left + width + padding-right + border-right.

So in your case it is interpreted as 110%:

0 + 5% + 100% + 5% + 0 = 110%

A perfect solution could be:

.tab-content {
    padding: 10px 5% 10px 5%;
    width:90%;
}

You can use box-sizing property of CSS3 BUT it has some bugs due to how to interpret it. I don't recommend use it. If it is used the CSS width property will included borders and paddings.

Unexpected border found on the random left side of a column in Chrome

When using inline-block for elements extra white spaces will be added due to the spaces between the HTML tags as line breaks and tabs count as space.

This white space is determined by the font of it's parent container.
Setting margin-right: -4px is improper to use, as it might be either 3x or 5px depending on the type of font used.

Here is an example of how font-size affects the space between the elements.

A more elegant solution to fight these spaces would be to float your elements and not used inline-blocks at all or you could use flexbox.

---

Related Topics