Web Front-end
HTML Tutorial
Under IE6.0, the vertical height of the li tag with float:left is 1px lower in English than in Chinese_html/css_WEB-ITnose
Under IE6.0, the vertical height of the li tag with float:left is 1px lower in English than in Chinese_html/css_WEB-ITnose
<ul style="list-style:none;text-decoration:underline;"> <li style="float:left;">中文</li> <li style="float:left;">English</li> <li style="float:left;padding-top:1px;">中文</li> <li style="float:left;">English</li> <li style="float:left;">中文</li></ul>
Reply to the discussion (solution)
I don’t understand what the original poster means
What to do by writing padding-top:1px ?
To: 1st floor
It seems that you have not tried this code. If you open it with IE6.0, you can understand what I mean by writing this line
The three middle ones are flush, and the first and last ones are one pixel higher than the three middle ones
The one I wrote is Note that English is 1px lower than Chinese. Padding-top: 1px. Move the third li down 1px to align it with the side
The positional relationship between them is "- _ _ _ -". There is no way to upload it here. Native image
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> </style> </head> <body> <ul style="list-style:none;text-decoration:underline;"> <li style="float:left;">中文</li> <li style="float:left;">English</li> <li style="float:left;">中文</li> <li style="float:left;">English</li> <li style="float:left;">中文</li> </ul> </body></html>
Remove padding-top:1px My test here is horizontal.
It is best for the poster to post the entire demo. There should be other styles that affect the li.
To 4th floor:
The code is complete, there is no other css, just put all Just save the content as *.html.
Take a look at the picture posted on the 3rd floor. If you look carefully, you can see the 1px height difference.
Are you using IE6.0 browser? IE6.0.2900.5512
Even if the font is enlarged, I can’t see the height difference of the original poster
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> body { font-size:31px; } li { text-decoration:underline; } </style> </head> <body> <ul style="list-style:none;"> <li style="float:left;">中文</li> <li style="float:left;">English</li> <li style="float:left;">中文</li> <li style="float:left;">English</li> <li style="float:left;">中文</li> </ul> </body></html>ie6, 7, 8 ff opera are all Tried it, no problem
I just tested it for a long time and thought there was a supernatural incident. After repeated comparisons, I found out:
Even if it is exactly the same code, the encoding of the page must be UTF-8 There will be bugs, but GB2312 does not have bugs
It was observed that the English fonts of these two encodings are actually different, and the English width of GB2312 is wider.
So, what is the reason for such a bug? How to solve it without changing the coding or changing the page UI?
Regarding character sets and fonts, you first define the character set and fonts to be used by the website in the body. I guess you are using Microsoft Yahei. Try changing to Song Dynasty
I don’t use Microsoft Yahei, there is no other any code at all, I just use float:left for li, a complete html code, copy it all directly, and You can see it by saving utf-8 as a *.html file. Have so many programmer friends never encountered such a situation? This code should be considered very commonly used
Steps to verify this bug:
1. Confirm that your IE is 6.0
2. Open Notepad
3. Change the 1st floor Copy and paste the entire content into Notepad
4. Menu->File->Save as, select UTF-8 for encoding, and html extension
5. Double-click the file you just saved
====
Follow the above steps and you will definitely see the bug I mentioned
Please help...
Can anyone help me...
Is it okay? The code given on the 4th floor has no problem when I test it here
Why does the poster want to change the encoding method to UIF-8? There is a problem in changing it to that, but why change it to that?
The website itself is encoded in UTF-8. If we change the encoding of the entire website just for this problem, wouldn’t it be a small gain? Moreover, UTF-8 is the universal encoding. Moreover, since such a bug exists, we should get to the bottom of it and not just avoid it by modifying the coding, right? Could it be that the programmers in the forum are just satisfied with knowing what is happening but not knowing why?
This problem does exist. It should be caused by the different baselines of different encodings for Chinese and English parsing.
For example, this
<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title></title> <style> body { font-size:50px; font-family:arial; } li { text-decoration:underline; } </style> </head> <body> <ul style="list-style:none;"> <li style="float:left;">中文</li> <li style="float:left;">English</li> <li style="float:left;">中文</li> <li style="float:left;">English</li> <li style="float:left;">中文</li> </ul> </body></html>Under ie6, 7, and 8, the letter "g" exceeds the underline, and the underline is offset,
under ff and chrome , although the letter "g" exceeds the underline, the underline is still very flat. . .
I only saw the surface. The specific situation needs to be studied and discussed. . . .
Someone has discussed it on blue,
Let’s take a look first
http://bbs.blueidea.com/thread-2878142-1-1.html
I’m so grateful, someone finally understands me, but it’s a pity that I’ve seen all of these, and I’ve just read the post you provided carefully, and I’ve summarized the method to correct this problem as follows:
1. Add attributes. There are three ways to say it, zoom:1;vertical-align:baseline;display:inline-block;
But through my attempts, all of them are invalid.
2. Modify the font. This has too much impact and is not a good idea.
Is there any way to solve this problem through CSS Hack? (It’s similar to method one).
Thank you.
The poster is very thoughtful. . .
http://gigalens.com/2009-07/webstandards-ie6-typographiy-bug.html
<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title></title> <style> body { font-size:24px; font-family:"宋体"; } li { text-decoration:underline; } </style> </head> <body> <ul style="list-style:none;"> <li style="float:left;">中文</li> <li style="float:left;">English</li> <li style="float:left;">中文</li> <li style="float:left;">English</li> <li style="float:left;">中文</li> </ul> </body></html> Um? It seems that after all this, there is only one conclusion: "Change the font"?
Well, then I have no choice but to accept my fate.
I just want to write "cleaner" code.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
