Chrome webpage dislocation caused by overflow: hidden

Source: Internet
Author: User
Today, I tested a page and found that it is normal in IE and FireFox, but it is misaligned in chrome. It is the dislocation between the upper and lower Divs. Open the source code and remove the overflow of the above div: the hidden result is displayed normally.

Today, I tested a page and found that it is normal in IE and FireFox, but it is misaligned in chrome. It is the dislocation between the upper and lower Divs. Open the source code and remove the overflow of the above div: the result of hidden is displayed normally. We can see that the webpage is mallocated in chrome, which can be caused by overflow: hidden!

Chrome uses the WebKit kernel. I am not very proficient in css. I found through data query:

Reference 1:In the WebKit kernel browser, when the script is used to change the box model for the layout with the 'float' feature and the 'overflow' feature value is not 'visable, the Reflow Calculation of Chrome Safari may be biased. As a result, layout content cannot be rendered during subsequent repainting operations.

Reference 2:The biggest misunderstanding of overflow: hidden: When overflow: hidden is applied to a container with at least one of its heights and widths, any internal overflow content will be cropped (hidden ). But is that true? The answer is "not necessarily "! The fact is that element overflow within a block element with the overflow: Den den style is not always hidden. Specifically, the following conditions must be met:
1. Block elements with overflow: hidden styles do not have the position: relative and position: absolute styles;
2. The internal overflow element is absolutely located through position: absolute;

Reference 3:Overflow specifies whether to crop a block element container when its content overflows the boundary of the box model. This attribute affects the tailoring of all content of the applied element. However, if the child element's inclusion block is the entire view area (usually the visible area of the browser content, it can be understood as the body element) or the container (the element that defines overflow) is not affected.

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.