关于IE6处理块级元素内部的问题
目的：制作宽为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即可，如下代码：<!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 {
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> 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>
<!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
font-size: 0px;19
}20
-->21
</style>22
</head>23
24
<body>25
<div></div>26
</body>27
</html>希望对有同样困扰的朋友有所帮助...
浙公网安备 33010602011771号