Table of CSS Bugs Caused by hasLayout

Table of CSS Bugs Caused by hasLayout
IE has had problems for a long time. When everyone was tested, everyone was smiling, but it was just grinning...

Alas, there is no way, because the domestic market is full of such grinning browsers... ( pay attention to the death speed of IE678 )

After checking, reading, excerpting, recording, practicing and summarizing one by one, I finally had a fundamental understanding of the cause of his bad habit.

hasLayout !

First the definition:

It is a unique property of IE. It determines whether an element either calculates the size and organizes its own content, or relies on the parent element to calculate and organize the content. To distinguish these two concepts, the rendering engine uses the hasLayout attribute, true or false. When the attribute is true, we say that this element triggers layout.

Tags with hasLayout attribute :

<html>, <body>, <table>, <tr>, <td>, <td>, <img>, <hr>, <input>, <button>, <select>, <textarea>, <fieldset>, <legend>, <iframe>, <embed>, <object>, <applet>, <marquee>

What is the significance 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 performed independently, that is, independent layout, so the browser will consume more costs to process elements with layout. In order to improve performance, IE has come up with this private property.

CSS features that can trigger hasLayout:


Copy code
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 can trigger the hasLayout CSS feature:


Copy code
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, only for block-level elements)
overflow-x: (any value except visible, only for block-level elements)
overflow-y: (any value except visible, only for block-level elements)
Position:fixed

Let's take a look at the clinical manifestations of crooked mouth and slanted eyes : (The following contents are all tested by myself)

question Browser DEMO Solution
1 input[button | submit] not centered IE8 bug | fixed Add width
2 body{overflow:hidden;} does not remove the scroll bar IE6/7 bug | fixed Change to html{overflow:hidden;}
3 The tag with hasLayout has height IE6/7 bug | fixed Add_overflow:hidden;*height:0
4 When the form>[hasLayout] element has margin-left, the [input | textarea] in the child element has 2×margin-left IE6/7 bug | fixed form > [hasLayout element] {margin-left: width;}
form div{*margin-left:width÷2;}
5 When a child element has position:relative, setting overflow:[hidden|auto] on the parent element is equivalent to setting position:visible on the child element; IE6/7 bug | fixed Set position:relative to the parent element;
6 Chaotic floating in the list: When floating images in the list, the images overflow the normal position; or there is no list-style IE8 bug | fixed Replace list-style with background image
7 th does not automatically inherit the text-align of the parent element IE8 bug | fixed Add text-align:inherit to th;
8 The maximum number of styles (including link/style/@import(link)) allowed is: 32 IE6-8 ─ Common sense 99.99% of the time, you won't encounter
9 The color in the PNG image and the background color have the same value, but are displayed differently IE6-7 bug | fixed Use pngcrush to remove gamma profiles from images
10 margin:0 auto; cannot make the block element horizontally centered IE6-8 bug | fixed Add a width to the block element
11 Use the pseudo-class :first-line | :first-letter, and the presence of !important in the attribute value will make the attribute invalid. IE8 bug | fixed !important is evil, don't use it anymore
12 :first-letter is no longer valid IE6 bug | fixed Move :first-letter to the closest place to {}, such as h1, p:first-letter{}, instead of p:first-letter h1{}
13 In a Position:absolute element, a display:block, only the text is clickable when not on :hover IE6/7 bug | fixed Add background to a. If the background is transparent, use background:url('cached file link in any page'). Background:url(#)[official solution] is not recommended because it will increase HTTP requests.
14 dt, dd, li background disabled IE6 bug | fixed dt, dd, li{position:relative;}
15 The <noscript /> element's styles are displayed when JavaScript is enabled IE6-8 bug | fixed Use js to add display:none to <noscript />;
16 The elements in li deviate from the baseline and pull down IE8/9 bug | fixed Set display:inline or float:[direction] for li
17 The list-style of li in the list is not displayed IE6/7 bug | fixed Add margin-left to li to leave space for display (do not add it to ul)
18 The image cannot be vertically centered IE6/7 bug/fixed Add an empty tag and assign it to "Layout", such as display:inline-block;
19 Cannot customize pointer style IE6-8 bug | fixed Set the absolute path to the pointer file
20 The height exceeds the height defined by height IE6 bug/fixed Add _overflow:hidden; (recommended) or _font-size:0;
twenty one The width exceeds the width defined by width IE6 bug/fixed add_overflow:hidden;
twenty two Double margins IE6 ─ Common sense Add display:inline to the float element
twenty three Negative margin value hides: non-hasLayout elements within the parent element of hasLayout, when negative margin is used, the part beyond the parent element is invisible IE6/7 bug/fixed Remove hasLayout from the parent element; or assign hasLayout to the child element and add position:relative;
twenty four Set the text of one of the two floating elements to italic, and the other element is dropped below the element with italic text IE6 bug/fixed Add overflow:hidden to the element with italic text;
25 3px spacing: Elements after the float element will have a 3px spacing IE6 bug/fixed Because it is exactly 3px, so use "brute force", such as _margin-left: -3px; or set float
26 text-align affects block-level elements IE6/7 bug/fixed Arrange your floats; or set text-align separately

<<:  Detailed process of SpringBoot integrating Docker

>>:  Use JS to operate files (FileReader reads --node's fs)

Recommend

In-depth understanding of the seven communication methods of Vue components

Table of contents 1. props/$emit Introduction Cod...

vue+element-ui implements the head navigation bar component

This article shares the specific code of vue+elem...

Detailed analysis and usage of tcpdump command under Linux

Introduction To put it simply, tcpdump is a packe...

Form submission page refresh does not jump

1. Design source code Copy code The code is as fol...

Introducing the code checking tool stylelint to share practical experience

Table of contents Preface text 1. Install styleli...

WeChat applet implements simple calculator function

WeChat applet: Simple calculator, for your refere...

User-centered design

I've been asked a lot lately about an apparen...

Detailed code of the example of downloading the docker installation package from yum and installing it on an offline machine

1. On a networked machine, use the default centos...

Our thoughts on the UI engineer career

I have been depressed for a long time, why? Some t...

Using JS to implement binary tree traversal algorithm example code

Table of contents Preface 1. Binary Tree 1.1. Tra...

Detailed explanation of the relationship between React and Redux

Table of contents 1. The relationship between red...

How to modify the location of data files in CentOS6.7 mysql5.6.33

Problem: The partition where MySQL stores data fi...

A bug fix for Tomcat's automatic shutdown

Preface Recently, a Java EE web project that has ...

Complete steps to build a squid proxy server in linux

Preface This article mainly introduces the releva...

CSS3 overflow property explained

1. Overflow Overflow is overflow (container). Whe...