在IE6.0下，带float:left的li标签，垂直高度英文比中文低1px_html/css

집

웹 프론트엔드

HTML 튜토리얼

在IE6.0下，带float:left的li标签，垂直高度英文比中文低1px_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:11 PM

<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>

额？看来说来说去还是只有一个结论：“改字体”咯？
哎好吧，那我也只有认命了。
我只不过想写出更为“干净”的代码。

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

See all articles