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
Recommend
CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing
1. When the mobile terminal processes the list sl...
IE conditional comments for XHTML
<br />Conditional comments are a feature uni...
Docker container exits after running (how to keep running)
Phenomenon Start the Docker container docker run ...
Illustration of the process of using FileZilla to connect to the FTP server
When I first started setting up an ftp server on ...
VUE Getting Started Learning Event Handling
Table of contents 1. Function Binding 2. With par...
A brief discussion on several ways to implement front-end JS sandbox
Table of contents Preface iframe implements sandb...
How to deploy SpringBoot project using Docker
The development of Docker technology provides a m...
Detailed explanation of Vue slot
1. Function : Allows the parent component to inse...
MySQL transaction, isolation level and lock usage example analysis
This article uses examples to describe MySQL tran...
Docker installation steps for Redmine
Download the image (optional step, if omitted, it...
In-depth study of JavaScript array deduplication problem
Table of contents Preface 👀 Start researching 🐱🏍...
MySQL 5.7.17 installation and configuration tutorial for Mac
1. Download MySQL Click on the official website d...
Solution to transparent font problem after turning on ClearType in IE
The solution to the transparent font problem after...
Detailed explanation of Vue.js directive custom instructions
Customize a demo command The syntax of Vue custom...
How to choose between MySQL CHAR and VARCHAR
Table of contents VARCHAR and CHAR Types Conclusi...