In IE 7, the text-indent attribute is changed to the margin attribute BUG, text-indentmargin

In IE 7, the text-indent attribute is changed to the margin attribute BUG, text-indentmargin

Problem Source

Today, when I was working on the project, I found a problem. By using the text-indent attribute to indent the element, I found that the element offset occurred in the 360 browser, which is the same as that in the margin-left browser, open f12 and find that the document mode of ie7.0 used for browsing in 3607.1 is the same as that in ie7.

IE7 Effect

 

 

Effects in other browsers

This is because ie6 and 7 browsers do not support the inline-block Value of the display attribute. If you set the value, it will be ignored, and the elements on my page will use the display: the inline-block attribute is inline in ie7, but hiie6 and 7 have the haslayout attribute. That is to say, the inline element in ie6 and 7 has a special situation, that is, layout is available after the hasLayout attribute of ie is triggered. In this case, the expression of the inline element is basically the same as that of the inline-block element in the standard browser. We use the private attribute zoom of ie to trigger hasLayout, and then we can see the performance of the inline element.

 display:inline-block; *display:inline; *zoom:1;

You can use this method to trigger layout to implement inline-block. Of course, you can also directly use the block attribute.

display:inline-block;*display:block;

 

The introduction to layout is reproduced below

 

What is haslayout?　　

"Layout" is a private concept of IE/Win, it determines how an element displays and limits its content, how it interacts and establishes connections with other elements, and how it responds to and transmits application events/user events, this is similar to the concept of a form. Microsoft developers think that box-type elements should have a "property" (a concept in Object-Oriented Programming), so they use layout, that is, hasLayout. HasLayout is neither an attribute nor an action, but a rendering engine that inherits from generation to generation a rendering concept. The rendering element under this concept will have a feature. In fact, this rendering feature is inherent in some HTML elements. In other elements, it can be triggered to true through some CSS attributes, and once triggered, it will be irreversible.

When we say that an element "has layout" or "Get layout", or an element "has layout, we mean that its Microsoft proprietary attribute hasLayout is set to true. A "layout element" can be an element that owns layout by default or an element that gets layout by setting certain CSS attributes. "No layout element" is an element that hasLayout has not been triggered. For example, a clean div element with unspecified width and height can be used as a "No layout ancestor ". To assign layout to an element without layout by default, you can set the CSS attribute that can trigger hasLayout = true. Refer to the default layout element and the list of these attributes. There is no way to set hasLayout = false unless the CSS attributes that trigger hasLayout = true at the beginning are removed. IE Developer Toobar can check the current style of an element in real time. If hasLayout is true, its value is displayed as "-1 ". We can set "zoom (css)" to "1" by modifying the attribute of an element in real time to trigger hasLayout for debugging. In addition, you can use javascript to obtain the hasLayout status. <script> alert (my. currentStyle. hasLayout); </script>, but cannot set it.

Note that "layout" will affect javascript programming. If an element does not have "layout", clientWidth/clientHeight always returns 0. This will confuse some new users of the script, and it is not the same as the processing method of the Mozilla Browser. However, we can use this to detect "layout" in IE5.0: If clientWidth is zero, this element does not have layout.

 Under what circumstances will hasLayout appear?

In fact, it usually does not appear. Of course, except using the following default element with hasLayout or using a specific style to trigger hasLayout; it will bring a variety of strange performances, when you find that IE6 IE7 has some incredible problems, the first thing to check is whether hasLayout is playing tricks; hasLayout only appears in IE7 and earlier versions, and there is no hasLayout resolution mode after IE8.

 Elements with haslayout by default (incomplete list)
* Html, body
* Table, tr, th, td
* Img
* Hr
* Input, button, file, select, textarea, fieldset
* Legend
* Marquee
* Frameset, frame, iframe
* Objects, applets, and embed
Not all elements are deployed by default. The main reason Microsoft gives is "performance and conciseness ". If all elements have a layout by default, it will have a harmful impact on performance and memory usage.

How to activate haslayout?

Most IE display errors can be corrected by stimulating the haslayout attribute of the element. You can set the css size attribute (width/height) to stimulate the haslayout of an element to "own the layout ". Set the following css attributes as follows.
* Display: inline-block
* Height: (any value except auto) usually uses _ height: 1%; To solve the IE6 problem, height: 1% does not change the actual height.
* Float: (left or right)
* Position: absolute
* Width: (any value except auto)
* Writing-mode: tb-rl
* Zoom: (any value except normal)
　　IE7 also has some additional attributes (incomplete list ):
* Min-height: (any value)
* Max-height: (any value except none)
* Min-width: (any value)
* Max-width: (any value except none)
* Overflow: (any value except visible)
* Overflow-x: (any value except visible)
* Overflow-y: (any value except visible)
* Position: fixed
Overflow-x and overflow-y are attributes in the css3 box model, which are not widely supported by browsers.
For inline elements (default: inline elements, such as span, or display: inline ), width and height only trigger hasLayout in IE5.x and IE6 or the updated quirks mode. For IE6, if the browser runs in standard compatibility mode, the inline element ignores the width or height attribute. Therefore, setting width or height cannot enable layout for this element.
Zoom can always trigger hasLayout, but it is not supported in IE5.0.
If an element with "layout" is displayed: inline at the same time, its behavior is similar to the inline-block mentioned in the standard: the section is arranged horizontally in the same way as the common text, and is affected by vertical-align. The size can be adjusted according to the content. This can also explain why inline elements in IE can contain block-level elements, because display: inline is inline in other browsers, unlike IE, once an inline element has layout, it will become an inline-block.
　　Debugging and solving haslayout Problems
When the webpage has abnormal performance in IE, you can try to stimulate haslayout to see if it is a problem. A common method is to set zoom: 1 for an element css. Zoom: 1 is used because in most cases, it can stimulate the haslayout of an element without affecting the existing environment. Once the problem disappears, you can basically determine the cause of haslayout. Then you can set the corresponding css attribute to correct this problem. We recommend that you first set the width/height attribute of the element, and then consider other attributes.
For IE6 and earlier versions, the common method is Holly hack, which sets the height of this element to 1% (height: 1% ;). It should be noted that when the overflow attribute of this element is set to visible, this method will become invalid. Or use the IE conditional annotation.
For IE7, set the minimum element height to 0 (min-height: 0;) in the best way ;).
　　Common Bugs caused by haslayout Problems
The peek-a-boo bug of E6
Bug fixes: _ height: 1%;

 

Additional information:

Triggering Conditions of hasLayout:

• Position: absolute(IE5 +)
• Float: left | right(IE5 +)
• Display: inline-block(IE5 +)
• Width: any value other than "auto"(IE5 +; invalid for inline elements)
• Height: any value other than "auto"(IE5 +; invalid for inline elements)
• Zoom: any value other than "normal"(IE5.5 +; private attribute of IE)
• Writing-mode: tb-rl(IE5 +; IE private attribute)
• Overflow: hidden | scroll | auto(IE7; this attribute cannot be applied to elements that do not trigger hasLayout in IE6 or earlier versions)
• Overflow-x |-y: hidden | scroll | auto(IE7; this attribute does not trigger hasLayout in IE6 or earlier versions; this attribute is only supported in CSS3)
• Position: fixed(IE7)
• Min-width: any value(IE7; even 0)
• Max-width: any value other than "none"(IE7)
• Min-height: any value(IE7)
• Max-height: any value other than "none"(IE7)
• Position: fixed(IE7)

Clear or reset hasLayout:

• Position: static(IE5 +)
• Float: none(IE5 +)
• Display: any value other than "inline-block"(IE5 +)
• Width | height: "auto"(IE5 +; invalid for inline elements)
• Zoom: "normal"(IE5.5 +; private attribute of IE)
• Writing-mode: From 'tb-rl 'to 'lr-tb'(IE5 +; IE private attribute)
• Max-width | max-height: "none"(IE7)
• Overflow: visible(IE7)