步骤6d--在ie中移动底下那行到正确位置。
/* Force the bottom row of images into place (IE only) */ #gallery li.pad { height:0; display:block; margin-top:-2px; width:448px; font-size:0; }
height:0; 让这个<li>不占用这个格子的空间 display:block; 让这个<li>为块级显示 margin-top:-2px; 去除顶端的margin(ie默认的margin) width:448px; 让这个<li>和<ul>一样宽 font-size:0; 通过设置字体大小为0来保证这个<li>的高度是0
现在底部这行终于归位了,不过在ie中,图片纵向之间的间隙还是要处理。
步骤6d示例:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
步骤6e--移除IE中图片间隙
/* Getting rid of the image gaps */ #gallery a { position:relative; width:64px; height:48px; display:block; float:left; z-index:100; cursor:default; }
position:relative; 让我们可以设置z-index width:64px; 让每个超链接64px宽 height:48px; 让每个超链接48px高 display:block; 让超链接为块级显示 float:left; 这行用来去除IE中的垂直间隙 z-index:100; 确保超链接永远在上面 cursor:Default; 修改超链接的鼠标样式(默认手形)为默认的箭头。
步骤6e示例:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
出处:蓝色理想
责任编辑:moby
上一页 XHTML+CSS创建“两步式”的相册 [5] 下一页 XHTML+CSS创建“两步式”的相册 [7]
◎进入论坛网络编程版块参加讨论
|