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

标签： , ,

ie6 :hover bug

五月 31, 2009 by zhanbin  
分类：web标准

1 评论

ie6 的 :hover bug很多blog都有介绍，普遍的说法是 给 :hover 定一个 display:block； 这其实只是一个方面。 其实 a内部嵌套的元素的css 属性也会影响 :hover 的触发。例如: position。

?View Code CSS
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

<div class="pos6">
<div class="pos posL"><a href="#">
<div></div>
 
<img src="../../images/app_photo/photo3.gif" alt="" class="pic" /></a></div>
<div class="pos posR"><a href="#">
<div></div>
 
<img src="../../images/app_photo/photo3.gif" alt="" class="pic" /></a></div>
 
    </div>
 
    
 
.pos6 .pos a:hover{ display:block; border:none; width:116px; overflow:hidden;}
.pos6 .pos{ width:116px; display:block; position:absolute;}
.pos6 .posL{ top:0; left:0;}
.pos6 .posR{ top:0; right:0;}
.pos6 .pos a .pic{ display: none;}
.pos6 .pos a:hover .pic{ display: block; width:80px; width:80px; float:right; border:solid 1px #ccc;}
.pos6 .posR a:hover .pic{ display: block; margin-left:0; float: left}
.pos6 .pos a div{ background: url(../../images/app_photo/btn.gif) no-repeat left top; width:19px; height:55px; float:left; cursor:pointer; *cursor:hand;}
.pos6 .posR a div{ background: url(../../images/app_photo/btn.gif) no-repeat -48px top; float:right;}
.pos6 .pos a:hover div{ background: url(../../images/app_photo/btn.gif) no-repeat left -50px; width:19px; height:55px; float:left;}
.pos6 .posR a:hover div{ background: url(../../images/app_photo/btn.gif) no-repeat -48px -50px; float:right;}


当 img的css属性中有positon 时， 图片在:hover 的时候不会显示的。

标签： , ,