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 |
|
|
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!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
