Analyze the percentage of css decimal points in each browser

Source: Internet
Author: User

For example:

1090px has an average score of 6 points, with each 16.66% point. chrome displays the following elements:

2nd and 4 elements: 181px

1st, 3, 5, 6 elements: 182px

In firefox, ie8, and later versions, although the box model displayed in the debugger parses the inner layer, each of which is 182px, if width: 16.66% is changed to width: the 182px page will be distorted. Some of them can be inferred that firefox, ie8, and later browsers have width "compromise" processing on the inner layer, which is the same as the result parsed by chrome, I just didn't extract it from the box model!

In ie7, if the decimal point is incorrectly parsed, add an hack to set * width: 16.65%.

Although there are differences in the resolution of ie7, we do not need to replace 16.66% with 181px because 16.66% enables the entire composition of internal split elements to appear horizontally centered on the page. Browser resolution: 16.66% * 6 and 181px * 6. The sum of the former is 3px greater than the sum of the latter. The sum of the former is equal to the outer width, and the sum of the latter is 3px smaller than the outer width!

In fact, the css percentage has a decimal point in addition to the down value or the css percentage. After testing, all browsers support this function, but ie7 shows obvious differences, an example of the simplest css percentage with a decimal number after division:

The outer layer is 99px in width. The inner layer has two elements floating and the width is 50%.

In theory, the width of the inner layer is calculated as 49.5px, but in fact:

In Chrome, the first element is 50px, and the second element is 49px, which is exactly the same as the outer width. That is:

In firefox, ie8, and later versions, the box model displayed in the debugger parses that each of the inner layers is 50px, but the outer layer is still 99px, as a result, we can understand that the browser mentioned above compromises the width of the inner layer. The effect is the same as that parsed by chrome, but it is not extracted from the box model!

See some examples below

First, let's take a look at an example to observe the differences between decimals in different browsers.

The code is as follows: Copy code


<! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> decimal </title>
<Style type = "text/css">
Body {font-family: SimSun; text-align: center ;}
P {margin: 20px; height: 30px ;}
. Font11-9 {font-size: 11.9px ;}
. Font11-4 {font-size: 11.4px ;}
</Style> www.111cn.net
</Head>
<Body>
<P class = "font11-9"> The text is 11.9 pixels in size. </P>
<P class = "font11-4"> The text is 11.4 pixels in size. </P>
</Body>
</Html>

We can see that in chrome, firefox, and ie8, decimal places are rounded to integers, while in ie6 and ie7, the lower limit of decimal places is rounded to integers. In some cases, we use decimal places to replace css hack. For example:

 

The code is as follows: Copy code
<! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> decimal </title>
<Style type = "text/css">
Body {font-family: SimSun; font-size: 30px ;}
. Black {background: black; width: 500px; height: 500px; margin-left: auto; margin-right: auto; overflow: hidden; color: white ;}
. White {background: white; width: 100px; height: 100px; margin: 0.9px ;}
</Style>
</Head>
<Body>
<Div class = "black">
<Div class = "white"> </div>
<P> In ie6 and ie7, the red block has no margin from the Black Block, while in other browsers, the red block has a 1 px margin. We generally write css hack, such as margin: 1px; * margin: 0; but now we can solve it by decimal places. </P>
</Div>
</Body>
</Html>

It not only shortens the code length, but also removes css hack.

Note: In ie7, the elements are rounded down directly. The width of the two elements in the inner layer is 50px, which is greater than the outer width. That is, the outer layer contains no less than two 50px inner layers, so in ie7, we can see two inner layers with line breaks!

Related Article

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.