Shulou(Shulou.com)06/03 Report--

Editor to share with you what the Bug of CSS caused by hasLayout, I believe most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

HasLayout!

Define it first:

It is a unique property of IE. It determines that an element either calculates the size and organization of its own content, or relies on the parent element to calculate the organized content. To distinguish between the two concepts, the rendering engine uses the attribute of hasLayout, true or false, and when the attribute is true, we say that this element triggers the Layout.

Tags with the hasLayout attribute:

The meaning of the existence of this attribute?

When the layout of an element object is activated, the positioning and size calculation of it and its child elements will be carried out independently, that is, independent layout, so the browser will spend more money on processing elements with layout. To improve performance, IE came up with such a private attribute.

The CSS feature that can trigger hasLayout:

The code is as follows:

Display: inline-block

Height: (any value except auto)

Width: (any value except auto)

Float: (left | | right)

Position:absolute

Writing-mode:tb-rl

Zoom: (any value except normal)

IE7 triggers the CSS feature of hasLayout:

The code is as follows:

Min-height: (any value)

Min-width: (any value)

Max-height: (any value except none)

Max-width: (any value except none)

Overflow: (any value except visible, for block-level elements only)

Overflow-x: (any value except visible, for block-level elements only)

Overflow-y: (any value except visible, for block-level elements only)

Position:fixed

Let's take a look at the clinical manifestations of mouth and eye deviation: (the following contents are tested by myself)

Problem browser DEMO solution 1input [button | submit] is not centered IE8bug | fixed adds width2body {overflow:hidden;} without removing scroll bar IE6/7bug | fixed is changed to html {overflow:hidden;} 3 A tag with hasLayout has a height of IE6/7bug | fixed adds _ overflow:hidden;*height:04form > when the [hasLayout] element has margin-left, [input | textarea] in the child element appears 2 × margin-leftIE6/7bug | fixedform > [hasLayout element] {margin-left: width;}

Form div {* margin-left: width / 2;} 5 when the child element has position:relative, setting overflow: [hidden | auto] for the parent element is equivalent to setting position:visible;IE6/7bug for the child element | fixed sets the chaotic float in the position:relative;6 list for the parent element: when the picture is floating in the list, the picture will overflow in its normal position. Or no list-styleIE8bug | fixed replacing list-style7th with a background image does not automatically inherit the text-alignIE8bug of the parent element | fixed adds text-align:inherit;8 styles to th (including link/style/@import (link)). The maximum allowed is: 32IE6-8 ─ 99.99% common sense, you will not encounter the same color and background color values in 9PNG images, but display different IE6-7bug | fixed uses pngcrush to remove Gamma profiles10margin:0 auto from images. Cannot center the block element horizontally IE6-8bug | fixed adds a width11 pseudo class to the block element: first-line |: first-letter, appears in the value of the attribute! important invalidates the attribute IE8bug | fixedinvalid is evil, don't use it anymore12:first-letter invalid IE6bug | fixed moves: first-letter to the nearest place to {}, such as H2, p:first-letter {}, rather than in the p:first-letter H2 {} 13Position:absolute element A display:block, when not: hover, only text can be clicked on IE6/7bug | fixed adds background to a. If the background is transparent, use background:url ('link to a file already cached on any page'). Background:url (#) [official solution] is not recommended, because HTTP request 14dt, dd, li background invalidation IE6bug will be added | fixeddt, dd, li {position:relative } 15-element style shows the style IE6-8bug with javascript enabled | fixed uses js to add display:none 16li elements deviate from baseline and drop down IE8/9bug | fixed sets display:inline or float to li: [direction] 17 the list-style of li in the list does not display IE6/7bug | fixed adds margin-left to li, leaves space to display (do not add on ul) 18 Images cannot be centered vertically IE6/7bug/fixed adds an empty tag and assigns to "Layout", such as display:inline-block 19 cannot customize pointer style IE6-8bug | fixed sets absolute path for pointer file 20 height exceeds height-defined high IE6bug/fixed add _ overflow:hidden; (recommended) or _ font-size:0;21 width exceeds width-defined wide IE6bug/fixed add _ overflow:hidden 22 double margin IE6 ─ Common sense add display:inline to float element 23margin negative Hidden: for non-hasLayout elements within the parent element of hasLayout, when using negative margins, the invisible IE6/7bug/fixed beyond the parent element removes the hasLayout of the parent element Or assign hasLayout to the child element and add position:relative;24 to set the text of one of the two floating elements to italic, and the other element drop down below the italic text element IE6bug/fixed to add the overflow:hidden;253px interval to the element with italic text: after the float element, there will be a 3px interval IE6bug/fixed because it is the exact 3px, so use "brute force cracking", such as _ margin-left:-3px Or set float26text-align to affect the block-level element IE6/7bug/fixed to organize your float Or set text-align separately and above is all the content of this article "what are the Bug of CSS caused by hasLayout"? thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.