Percentage details-container size _ Experience Sharing

Source: Internet
Author: User
Percent details-container size article because the minimum unit displayed on the screen is 1px, there must be a trade-off between the length of numbers such as 773 * 50% = 386.5.

On the test page, Some browsers also contain the standard width.

IE: calculated in rounding mode.

Firefox: After calculation, the fractional part is ignored, but the extra length is allocated to each element. If only 1 px is exceeded, for example, 2*386 = 772, the remaining 1px will be included in one of the elements, and the first element will be preferentially allocated. If 773px is allocated to two 50% elements, the following result will be obtained: when 387px and pixel px are allocated to four 25%, the following values are obtained: 194px, 193px, 193px, and 193px. For more pixels, such as 773 * 33.3% = 257.409, 773 * 33.33% = 257.6409, because the number of decimal points ignored is different, the allocation principles are different, and relevant information cannot be found. The following is my conjecture: the distribution of the three elements is rounded down, the four homes are preferentially allocated to both sides, and the five homes are preferentially allocated to the first two sides. If more elements are allocated to more than three elements, I cannot find the rule, but the first one will be allocated.

FF has some strange things. Firefix test page. 1024 width will not be automatically allocated, maybe because the outer layer is also decimal, resulting in 1 px not allocated, and then test Firefox

Opera & Safari2: the fractional part of the percentage is ignored during calculation, and the calculated value ignores the fractional part. If the element inside is greater than the calculated width, it will not cause the next element to wrap.

Netscape & Mozilla: ignores decimal points after computation. The extra part is similar to Firefox, but the extra part is more transparent and strange, such as 33.33% * 3 = 99.99% less than 100%, but it is more than 100%. There are not many users using strange browsers, so you don't have to worry too much about these two browsers.

The test is not completed. If you are interested, you can test the test. On the test page, if you have any reason, click "OK ".

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: info-contact@alibabacloud.com 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.