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
AI Hentai Generator
Generate AI Hentai for free.
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
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
