IE6/7 is going to be a mess: empty text node height issue

Preface:

Use debugbar to view document code in ietester. There is this text: empty text node in every ul li, some are in span, in... In a word, there must be one under the li, sometimes there are more than one. Generally, there is no problem. Today, I encountered an unlucky thing. I saw that the text: empty text node had a height when using layout, and it was not the height of the li, but 4px higher than the displayed height of the li. For the previous paragraph, this 1px is painful, let alone 4px. This guy had me puzzled for a long time.

Think about the translation: Text: Empty text node. If it is empty, why does it have a height? I searched online but found no corresponding explanation.

I posted the CSS code, let's study it together. I added font-size:0px in the li; although it solved the problem, I still want to ask the experts to give some reasons!

Copy code

The code is as follows:

.sidebar_menu{width:225px; list-style:none; position:relative;}
.sidebar_menu li{ line-height:34px;width:225px; height:35px;<SPAN style="COLOR: #ff0000">font-size:0px;</SPAN> position:relative;}
.sidebar_menu li span{ display:block;width:225px;height:34px; overflow:hidden; border-bottom:1px solid #007ac7;}
.sidebar_menu li span a{ width:225px;text-align:left;text-indent:35px;display:block; font:14px/34px Arail,"Microsoft YaHei";color:#333; background:#c3e1f4;}

Upload a screenshot

This picture can be seen very well in ietester. Click layout to see the text: empty text node.

<<: canvas.toDataURL image/png error handling method recommendation

>>: Detailed introduction to linux host name configuration

How are Vue components parsed and rendered?

IE6/7 is going to be a mess: empty text node height issue

How are Vue components parsed and rendered?

Docker containers communicate directly through routing to achieve network communication

How to implement the jQuery carousel function

Using Docker to create static website applications (multiple ways)

A detailed tutorial on master-slave replication and read-write separation of MySQL database

vue+elementui implements the complete code of adding and modifying a shared bullet box

Nginx reverse proxy learning example tutorial

K3s Getting Started Guide - Detailed Tutorial on Running K3s in Docker

How to view and configure password expiration on Linux

MySQL account password modification method (summary)

Recommend

Detailed explanation of concat related functions in MySQL

MySQL 5.7.31 64-bit free installation version tutorial diagram

Implementation of nacos1.3.0 built with docker

VMware configuration hadoop to achieve pseudo-distributed graphic tutorial

CSS float property diagram float property details

Html makes a simple and beautiful login page

js to implement a simple bullet screen system

WeChat applet uniapp realizes the left swipe to delete effect (complete code)

Sorting out some common problems encountered in CSS (Hack logo/fixed container/vertical centering of images)

Reference SVG images in CSS to support dynamic color switching implementation code

Detailed explanation of browser negotiation cache process based on nginx

Detailed explanation and examples of database account password encryption

How to solve the problem of installing VMware tools under VMware and the installation file not appearing

Solve the problem of the container showing Exited (0) after docker run

Detailed tutorial on how to create a user in mysql and grant user permissions