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

Detailed introduction to CSS priority knowledge

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

Detailed introduction to CSS priority knowledge

Tomcat breaks the parent delegation mechanism to achieve isolation of Web applications

JavaScript timer to achieve seamless scrolling of pictures

Application examples of WeChat applet virtual list

DHCP Configuration Tutorial in CentOS7 Environment

How to install mysql database in deepin 2014 system

Analysis of the use of Linux vulnerability scanning tool lynis

How to implement a multi-terminal bridging platform based on websocket in JS

Play mp3 or flash player code on the web page

MySQL database design: detailed explanation of Schema operation method using Python

Recommend

Instructions for nested use of MySQL ifnull

Ubuntu 20.04 CUDA & cuDNN Installation Method (Graphical Tutorial)

How to use React forwardRef and what to note

Example of utf8mb4 collation in MySQL

Method of implementing recursive components based on Vue technology

CSS3 achieves cool 3D rotation perspective effect

MySQL 8.0.12 installation and configuration graphic tutorial

MySQL and MySQL Workbench Installation Tutorial under Ubuntu

Detailed Introduction to Nginx Installation and Configuration Rules

How to connect to MySQL remotely through Navicat

Vue3 list interface data display details

How to modify Ubuntu's source list (source list) detailed explanation

MySQL 5.7.18 Green Edition Download and Installation Tutorial

MySQL 5.7.13 installation and configuration method graphic tutorial on Mac

MySQL 5.7.25 compressed version installation and configuration method graphic tutorial