Subscribe to 无限摄影News FeedSubscribe to 无限摄影Comments

ie下中英文混排时文字基线高低不一致bug

七月 22, 2009 by zhanbin  
分类：web标准

6 评论

首先看个代码

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul>
<li>
<h3>密码找回</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
<li>
<h3>账号安全</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
<li>
<h3>邮箱续费</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
<li>
<h3>VIP朋友</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
<li>
<h3>邮箱续费</h3>
<div class="indexH3Intro">为您提供取回密码、密码保护和号码申诉等服务</div>
</li>
</ul>
?View Code CSS
1
2
3
4

ul li{ width:134px; float:left;}
ul li h3{ margin:22px 0 0 39pxcolor:#333333; font-size:14px; }
ul li .indexH3Intro{ line-height:18px; color:#666666; width:110px; margin:14px 0 22px 15px; overflow:hidden; height:55px;}
ul li p{ margin-left:15px;}

在ie下可以看到h3文字的下边线并不在同一条线上

image

解决此问题的方法有2种：

1. 设定字体全为宋体。

?View Code CSS
1

ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family:  &quot;宋体&quot;;}

image

但是应用此种方法后英文字体不是很美观，所有就有了第二种方法。

2.设定英文字体为 Arial，中文字体为宋体。同时设定行高line-height为1.231.

?View Code CSS
1

ul li h3{ margin:22px 0 0 39px;color:#333333; font-size:14px; font-family: Arial, &quot;宋体&quot;; line-height:1.231}

image

标签： , ,

margin边界叠加问题以及ie和Firefox的不同解释

十一月 19, 2008 by zhanbin  
分类：web标准

评论

使用google搜索margin 边界叠加边界的时候，搜索出来的每一篇文章详细的说明了 margin边界叠加的原理。但是在某些浏览器和一起其他style存在的时候边界的实际叠加情况并不按照边界叠加原理展现。

在ie6，ie7 中，如果一个容器

在ie6，ie7 中，如果一个容器<div class="f" />包含了一个子容器<div class="s" />的时候有以下几种情况：

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>边界叠加问题</title>
</head>
 
<body style="padding:20px; margin:0; font-size:14px; font-family:Verdana, Geneva, sans-serif; background-color:#000">
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef;">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况1
.f{ background-color:#efefef;}
.s{ margin-top:20px; border:1px solid #f00;}
 
ie和Firefox解释相同，margin叠加了，并叠加到了父容器上。 父容器使用子容器的margin-top，就像是父容器有一个margin-top一样。
</div>
</div>
</div>
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef; height:250px;">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况2
.f{ background-color:#efefef;height:250px;}
.s{ margin-top:20px; border:1px solid #f00;}
 
当父容器的高度被指定后，ie和 Firefox的表现就变得不一样了，Firefox的表现和情况1 一样。而在ie中，边界没有叠加，margin-top作用到了子容器.s中，在子容器和父容器之间出现了一个margin
</div>
</div>
</div>
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef; height:250px; overflow:hidden">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况3
.f{ background-color:#efefef; height:250px; overflow:hidden}
.s{ margin-top:20px; border:1px solid #f00;}
 
当在父容器添加overflow:hidden 时，ie和Firefox的表现又一致了，和之前ie的表现一样，都是边界不叠加。
</div>
</div>
</div>
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef; border-top:1px solid #f00">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况4
.f{ background-color:#efefef; height:250px; overflow:hidden}
.s{ margin-top:20px; border:1px solid #f00;}
 
如果父容器包含border和padding属性时，边界不叠加,且不会将子容器的边界添加到父容器上。因为两个容器的边界不相连接。
</div>
</div>
</div>
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef; padding-top:1px ">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况5
.f{ background-color:#efefef; height:250px; overflow:hidden}
.s{ margin-top:20px; border:1px solid #f00;}
 
如果父容器包含border和padding属性时，边界不叠加,且不会将子容器的边界添加到父容器上。因为两个容器的边界不相连接。
</div>
</div>
</div>
 
</body>
</html>

示例：margin边界叠加

标签： ,

CSS Sprites2 – It’s JavaScript Time

十一月 7, 2008 by zhanbin  
分类：web标准

2 评论

CSS Sprites2 –
It’s JavaScript Time

标签： , ,