在IE6.0下,带float:left的li标签,垂直高度英文比中文低1px_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>
回复讨论(解决方案)
不明白楼主的意思
写个padding-top:1px 做什么?
To:1楼
看来你并没有尝试一下这段代码。你用IE6.0打开就能明白我写这行的意思了
中间三个是平齐的,第一个和最后一个都比中间三个高出一个像素
我写上那个就是说明英文比中文低1px啊,padding-top:1px把第三个li往下挪了1px才能与旁边对齐
它们之间的位置关系是“- _ _ _ -”,没办法这里不能上传本机图片
<!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>
去掉padding-top:1px 我这边测试是 水平的。
楼主最好把demo贴全,应该有其他样式 影响到li了
To 4楼:
代码是完整的,没有其他css,直接把所有内容存为*.html即可。
你看看3楼贴出的图,仔细看看就能发现1px高度差
请问你使用的是IE6.0浏览器么?IE6.0.2900.5512
字体弄大了也看不到 楼主?的 高度差
<!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 都试了,没问题
刚才测试了半天,还以为出了灵异事件呢,通过反复比对才发现:
即使是完全相同的代码,还必须页面的编码是UTF-8才会出Bug,而GB2312则不出Bug
观察发现这两种编码的英文字体居然还不同,GB2312的英文宽度宽一些。
那么,这样的Bug是什么原因呢?如何在不为其改变编码也不改变页面UI的情况下解决呢?
字符集和字体的问题,你在body里先把网站要使用的字符集和字体定义好。估计你用的是微软雅黑吧。换宋体试试
我没有用微软雅黑,根本就没有其他 任何代码,仅仅是对于li使用了float:left,个完整html代码,直接全部复制,以utf-8存为一个*.html文件就能看到,难道这么多程序员朋友们都未曾遇到过这样情况么?这个代码应该算是很常用的才对啊
验证此Bug的步骤:
1.确认您的IE是6.0的
2.打开记事本
3.将1楼全部内容复制粘贴到记事本
4.菜单->文件->另存为,编码选择UTF-8,扩展名html
5.双击刚才所保存的文件
====
按照以上步骤做,您一定能看到我所说的Bug
求助………
有木有人帮帮我……
没问题吧?4楼给出的代码我这里测试也没问题啊
楼主为什么要吧编码方式改成UIF-8?改成那样是有问题了,但,为什么改成那样呢?
网站本身是UTF-8编码的啊,如果仅仅为了这个问题,就更改整个网站的编码,未免有些因小失大了吧?况且UTF-8才是通用的编码。并且,既然有这样的Bug存在,就应该刨根问底,不能一味的以修改编码的方式回避吧?莫非论坛里的程序员们都是仅仅满足于知其然不知其所以然的?
确实有这个问题,应该是不同编码对 中文 英文解析的基准线 不同造成的。
比如这个
<!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>
ie6、7、8 下 字母“g”均超过下划线,并且下划线发生偏移,
ff和chrome下 ,虽然 字母“g”超过下划线,但是 下划线依然很平整。。。
仅仅看到了表象,具体是什么情况,待研究 讨论。。。。
蓝色上面有人讨论过,
先看看
http://bbs.blueidea.com/thread-2878142-1-1.html
感激涕零啊,总算有个明白人了,只不过可惜的是这些我都看过,刚才也仔细阅读了你提供的帖子,总结出纠正这个问题的方法如下:
1.加属性。有三种说法,zoom:1;vertical-align:baseline;display:inline-block;
但是通过我的尝试,全部无效。
2.修改字体。这个影响太大,不是个好办法。
有没有通过CSS Hack解决这个问题的办法呢?(就是类似方法一的)。
谢谢哦。
楼主很钻研啊。。。
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>
额?看来说来说去还是只有一个结论:“改字体”咯?
哎好吧,那我也只有认命了。
我只不过想写出更为“干净”的代码。

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
