Web page comments cause text overflow in IE
|
The experimental code is as follows: Tip: You can modify part of the code first and then run 1. Test in IE and FF. Text overflow only occurs in IE. Note: Comments causing text overflow is a bug in IE. 2. Remove the "float:left;" in <div style="float:left"></div>, and you will find that the extra word "pig" disappears and the page is displayed normally. Tip: You can modify part of the code first and then run the program to remove the "float:right;" in <div style="float:right;width:400px">. The redundant "pig" character will also disappear and the page will display normally. Tip: You can modify part of the code before running. Note: The text overflow caused by comments is related to the floating of the block. 3. Move the comment to the front of <div style="float:left"></div>, the extra "pig" character disappears, and the page displays normally. Tip: You can modify part of the code first and then run the program to move the comment to under <div style="float:right;width:400px">↓This is the extra pig</div>. The extra word "pig" will also disappear and the page will display normally. Tip: You can modify part of the code before running. Note: Comments causing text overflow are related to their position. (Can be understood in conjunction with point 2) 4. Remove the “width:400px” in <div style="float:right;width:400px">, the extra word “pig” disappears, and the page displays normally. Tip: You can modify some codes before running. Note: The text overflow caused by comments is related to the fixed width of the text block (whether it is an absolute value or a relative value). 5. Increase the number of comments: when there is 1 comment, 1 more word will be added; when there are 2 comments, 3 more words will be added; when there are 3 comments, 5 more words will be added... Tip: You can modify some of the code before running Tip: You can modify some of the code before running Tip: You can modify some of the code before running Tip: You can modify part of the code first and then run it. We will get a formula from the above rules: the number of overflow words = the number of comments * 2-1. The number of words here is valid for Chinese or English numbers. When the overflow text is larger than the text, the text block will disappear. Tip: You can modify part of the code before running. Note: The number of overflow words is related to the number of comments. From the tests 1 and 2, we know that comments should not be placed between two floating blocks. Solution: 1. No comments are placed. The simplest and quickest solution, hehe... Tip: You can modify part of the code before running. 2. Do not place comments between two floating blocks. Tip: You can modify some codes before running. 3. Enclose the text block between new <div></div>, such as: <div style="float:right;width:400px"><div>↓This is the extra pig</div></div>. Tip: You can modify some codes first and then run 4. Remove the fixed width of the text block, which is similar to 3. Tip: You can modify part of the code before running. The above analysis and solutions may be inadequate or inaccurate. Welcome to discuss and correct them. |
<<: Detailed explanation of the use of ElementUI in Vue
>>: The docker container directly runs to obtain the public IP operation through ping
Recommend
Summary of methods for creating, listing, and deleting Docker containers on Linux
1. Start the Docker container Start a new Docker ...
Vue realizes the product magnifying glass effect
This article example shares the specific code of ...
Limiting the number of short-term accesses to a certain IP based on Nginx
How to set a limit on the number of visits to a c...
Detailed graphic tutorial on installation, startup and basic configuration of MySQL under Windows version
download: Step 1: Open the website (enter the off...
Example of Vue uploading files using formData format type
In Vue, we generally have front-end and back-end ...
Clever use of webkit-box-reflect to achieve various dynamic effects (summary)
In an article a long time ago, I talked about the...
Detailed explanation of the solution to the problem of automatic disconnection of xshell remote connection
Solution to the problem of automatic disconnectio...
Vue batch update dom implementation steps
Table of contents Scene Introduction Deep respons...
Introduction to the usage of common XHTML tags
There are many tags in XHTML, but only a few are ...
How to implement import and export mysql database commands under linux
1. Export the database using the mysqldump comman...
js simple and crude publish and subscribe sample code
What is Publish/Subscribe? Let me give you an exa...
Summary of CJK (Chinese, Japanese, and Korean Unified Ideographs) Characters in Unicode
CJK is the abbreviation of CJK Unified Ideographs...
Detailed explanation of the usage of MySQL data type DECIMAL
MySQL DECIMAL data type is used to store exact nu...
Details on using bimface in vue
Table of contents 1. Install Vue scaffolding 2. C...
Dockerfile text file usage example analysis
Dockerfile is a text file used to build an image....