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

HTML table tag tutorial (27): cell background image attribute BACKGROUND

We can set a background image for the cell, and w...

Learn the operating mechanism of jsBridge in one article

Table of contents js calling method Android 1.js ...

How to create a trigger in MySQL

This article example shares the specific code for...

A brief analysis of different ways to configure static IP addresses in RHEL8

While working on a Linux server, assigning static...

JavaScript and JQuery Framework Basics Tutorial

Table of contents 1. JS Object DOM –1, Function –...

Introduction to container of() function in Linux kernel programming

Preface In Linux kernel programming, you will oft...

How to build a SOLO personal blog from scratch using Docker

Table of contents 1. Environmental Preparation 2....

An example of vertical centering of sub-elements in div using Flex layout

1. Flex is the abbreviation of Flexible Box, whic...

Detailed tutorial on installing MySQL 8.0.20 database on CentOS 7

Related reading: MySQL8.0.20 installation tutoria...

Implementation of Nginx configuration https

Table of contents 1: Prepare https certificate 2:...

Using cursor loop to read temporary table in Mysql stored procedure

cursor A cursor is a method used to view or proce...

JavaScript prototype and prototype chain details

Table of contents 1. prototype (explicit prototyp...

Detailed explanation of the pitfalls of nginx proxy socket.io service

Table of contents Nginx proxies two socket.io ser...

A case study to thoroughly understand how to correctly use MySQL inndb joint index

There is a business that queries the 5 most recen...

Vue implements horizontal beveled bar chart

This article shares the specific code of Vue to i...