目的：制作宽为300像素，高为2像素，边框为1像素的长方体（或者应该叫线）
出现的问题：用以下代码
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>无标题文档</title>
6
<style type="text/css">
7
<!--
8
9
div {
10 background: #99FF99;
11 height: 2px;
12 border: 1px solid #FF0000;
13 line-height: 2px;
14 margin: 0px;
15 padding: 0px;
16 float: left;
17 width: 300px;
18
}
19
-->
20</style>
21</head>
22
23<body>
24<div></div>
25</body>
26</html>
发现在IE6下无法实现高度为2像素，至少有10多像素的高，IE7和FF下则没问题，搞了半天都没弄明白是怎么回事，当然最后搞清楚了，把字体大小设为0px即可，如下代码：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>无标题文档</title>
6<style type="text/css">
7<!--
8
9div {
10 background: #99FF99;
11 height: 2px;
12 border: 1px solid #FF0000;
13 line-height: 2px;
14 margin: 0px;
15 padding: 0px;
16 float: left;
17 width: 300px;
18 font-size: 0px;
19}
20-->
21</style>
22</head>
23
24<body>
25<div></div>
26</body>
27</html>
希望对有同样困扰的朋友有所帮助...
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。