Percent detail--Container size article _ Experience Exchange

Source: Internet
Author: User
Because the smallest unit that the screen can display is 1px, there must be a trade-off with the length of a number like 773*50%=386.5.

Test page, some browser's truncated icon width is also inside

IE: calculated in rounded manner.

Firefox: The computed value ignores the decimal part, but assigns the extra length to the elements inside. If you have only 1px, such as 2*386=772, the remaining 1px will go to one of the elements, prioritizing the first element, like 773px allocated to two 50%: 387px and 386PX, when assigned to four 25%: 194px, 193px, 193px and 193px, but for a few px, such as 773*33.3%=257.409,773*33.33%=257.6409, due to ignore the decimal number is not the same, the principle of distribution is not the same, can not find relevant information, the following is my guess, three elements, According to the way of rounding, the priority of the four homes to the two sides, five priority assigned to the front two, for the allocation of more than three elements, more than part of the free distribution, I can not find the law, but the first will definitely be assigned to.

There are some strange places in ff. Firefix test page. 1024 width is not automatically allocated, perhaps because the outer layer is also a decimal, resulting in 1px did not allocate, and then test Firefox

Opera & Safari2: The fractional part of the percentage is ignored in the calculation, the computed value ignores the decimal portion, and if the element inside is greater than the calculated width, the following elements will not be wrapped.

Netscape & Mozilla: After the calculation ignores decimals, the more part is similar to Firefox, but the more part is than transparent display, and more strange, such as 33.33%*3=99.99% less than 100%, but more than 100%, Strange browser, Fortunately, the use of a few people do not care about the two browsers.

Test not completed, interested friends to help test, a separate test page, a friend who knows the reason to talk about the next

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.