CSS Rounding Issues
Look at this page. The blue color highlights 4 floating blocks with a width of 25% each, which are located in a container with a width of 50px. Now the question is: What is the width of each block?
This width should be equal to 12.5px, but since we can only use integer values, then we have to round the values. And then the question arises: In which direction to round? In more, in less or in both? The results I think you will be surprised, like me.
As a result, we have three completely different camps.
')
- Round down - Both Opera and Safari rounded the width to 12px. As a result, a 2-x pixel space (marked in green) is formed to the right of the blocks. If you have ever puzzled why your beautiful navigation does not fill the entire container space, now you know the answer.
- Rounding up - the 6th and 7th Internet Explorer increase the width to 13px, which leads to a "breakdown" of the site structure.
- Rounding in both directions - Firefox 2 and 3 combine both approaches, rounding the width of some blocks to the smaller side, and others to the larger one. A side effect is that the width of the blocks now has a different meaning, despite the fact that one value is set in CSS. In addition, if you get the value of the width using Javascript, then it will be equal to 12.5px, without making it clear in which direction the rounding was made. There is another unpleasant moment. Firefox 3 changes the rounding order.
David Baron , one of the Mozilla developers, explained the situation:
- We try to follow all the rules described below, which, however, can not be satisfied at the same time:
1. 4 adjacent objects with a width / height of 25% (for example) starting at one edge of the outer container should end at the other. There should not be any free or extra pixels.
2. Objects that are logically related should always visually touch each other. There should be no empty spaces or overlaps due to rounding errors.
3. Objects with the same width should occupy the number of pixels that was set.
4. The boundaries of objects should not be blurred.
These rules may be helpful, but you will have to sacrifice at least one of them in order to satisfy the others.
Original: Sub-Pixel Problems in CSS
This width should be equal to 12.5px, but since we can only use integer values, then we have to round the values. And then the question arises: In which direction to round? In more, in less or in both? The results I think you will be surprised, like me.
As a result, we have three completely different camps.
')
- Round down - Both Opera and Safari rounded the width to 12px. As a result, a 2-x pixel space (marked in green) is formed to the right of the blocks. If you have ever puzzled why your beautiful navigation does not fill the entire container space, now you know the answer.
- Rounding up - the 6th and 7th Internet Explorer increase the width to 13px, which leads to a "breakdown" of the site structure.
- Rounding in both directions - Firefox 2 and 3 combine both approaches, rounding the width of some blocks to the smaller side, and others to the larger one. A side effect is that the width of the blocks now has a different meaning, despite the fact that one value is set in CSS. In addition, if you get the value of the width using Javascript, then it will be equal to 12.5px, without making it clear in which direction the rounding was made. There is another unpleasant moment. Firefox 3 changes the rounding order.
David Baron , one of the Mozilla developers, explained the situation:
- We try to follow all the rules described below, which, however, can not be satisfied at the same time:
1. 4 adjacent objects with a width / height of 25% (for example) starting at one edge of the outer container should end at the other. There should not be any free or extra pixels.
2. Objects that are logically related should always visually touch each other. There should be no empty spaces or overlaps due to rounding errors.
3. Objects with the same width should occupy the number of pixels that was set.
4. The boundaries of objects should not be blurred.
These rules may be helpful, but you will have to sacrifice at least one of them in order to satisfy the others.
Original: Sub-Pixel Problems in CSS
Source: https://habr.com/ru/post/19528/
All Articles