Home > Article > Web Front-end > 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
- WBOYOriginal
- 2016-06-24 12:11:32932browse
<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.