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
Let you understand the working principle of JavaScript
Table of contents Browser kernel JavaScript Engin...
CentOS server security configuration strategy
Recently, the server has been frequently cracked ...
How to configure the pdflatex environment in docker
Technical Background Latex is an indispensable to...
MySQL uses init-connect to increase the implementation of access audit function
The mysql connection must first be initialized th...
WeChat applet implements login interface
The login interface of WeChat applet is implement...
Simple usage of MySQL temporary tables
MySQL temporary tables are very useful when we ne...
Vue+canvas realizes the effect of refreshing waterfall chart from top to bottom in real time (similar to QT)
Without further ado, here is a demo picture. The ...
Discussion on the numerical limit of the ol element in the html document
Generally speaking, it is unlikely that you will ...
jQuery achieves large-screen scrolling playback effect
This article shares the specific code of jQuery t...
Example of implementing QR code scanning effects with CSS3
Online Preview https://jsrun.pro/AafKp/ First loo...
jQuery uses the canvas tag to draw the verification code
The <canvas> element is designed for client...
A brief discussion on several ways to pass parameters in react routing
The first parameter passing method is dynamic rou...
Detailed explanation of MySQL Workbench usage tutorial
Table of contents (I) Using Workbench to operate ...
How to use react-color to implement the front-end color picker
background We can use react-color to implement th...
Vue+elementui realizes multiple selection and search functions of drop-down table
This article shares the specific code of vue+elem...