请教一下,CSS 显示有点问题,不太明白,谢谢了

阅读:6951回复:12
2005-04-11 03:50
写私信
楼主#
1.
同样的 CSS ,我做出来的链接,在 IE 中背景图标显示在最上面,而 Firefox 却显示在最下面。
每张图片的尺寸为 100x100 ,如果我把背景图标制作的高度也为 100 时,IE 能够显示正常,但是 Firefox 却一片空白,不太明白    

2.
位于<div id="Edit_02">层中,如果 a:link 不设置背景,在 IE 中 a:hover,a:active 的背景也不能显示,而 Firefox 正常。
但是在<div id="Edit_01">层中这样设置,IE 又一切正常,显示和 Firefox 一样。同一个页面的不同 div 区域怎么会出现这样的情况呢?

我不知道是浏览器 Bug 还是我写的有问题,去W3C检测语法上倒是没有错误,还请高手指教,谢谢了!!!!
     

3.
还想问一下,div 用多了是不是回比表格更占用资源啊?我发现 IE 显示比较长的页面时,会出现滞后的情况,Firefox 是没问题。
   

说了这么多,还是直接把页面贴出来

http://din.nease.net/carl/gallery/bella/index.htm
2005-04-11 03:50
写私信
1楼#
这是网页源码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>“Bella”</title>
<link href="../../carlcss.css" rel="stylesheet" title="Style1" type="text/css">
</head>

<body>
<div id="top_background">
<div id="menu_button">
<div id="button_index"><a href="../../index.htm">首页</a></div>
<div id="button_news"><a href="../../news/index.htm">新闻</a></div>
<div id="button_profile"><a href="../../profile/index.htm">资料</a></div>
<div id="button_gallery"><a href="../index.htm">图库</a></div>
<div id="button_film"><a href="../../filmography/index.htm">剧照</a></div>
<div id="button_video"><a href="../../video/index.htm">视频</a></div>
<div id="button_special"><a href="../../special/index.htm">特别</a></div>
<div id="button_info"><a href="../../info/index.htm">信息</a></div>
</div>
<div id="title_01">图库</div>
<div id="title_02"></div>
</div>
<div id="mid_background">
<div id="back_button"><a href="../index.htm">返回</a></div>
<div id="edit_01">
<H3>Bell</H3>
<div id="piclist_01">
  <a href="images/001.jpg" target="_blank"><img src="thumbnails/001.jpg" alt="001" width="100" height="100" border="0"></a>
  <a href="images/006.jpg" target="_blank"><img src="thumbnails/006.jpg" alt="006" width="100" height="100" border="0"></a>
<div id="piclist_02">
  <a href="images/002.jpg" target="_blank"><img src="thumbnails/002.jpg" alt="002" width="100" height="100" border="0"></a>
  <a href="images/007.jpg" target="_blank"><img src="thumbnails/007.jpg" alt="007" width="100" height="100" border="0"></a>
</div>
<div id="piclist_03">
  <a href="images/003.jpg" target="_blank"><img src="thumbnails/003.jpg" alt="003" width="100" height="100" border="0"></a>
  <a href="images/008.jpg" target="_blank"><img src="thumbnails/008.jpg" alt="008" width="100" height="100" border="0"></a>
</div>
<div id="piclist_04">
  <a href="images/004.jpg" target="_blank"><img src="thumbnails/004.jpg" alt="004" width="100" height="100" border="0"></a>
  <a href="images/009.jpg" target="_blank"><img src="thumbnails/009.jpg" alt="009" width="100" height="100" border="0"></a>
</div>
<div id="piclist_05">
  <a href="images/005.jpg" target="_blank"><img src="thumbnails/005.jpg" alt="005" width="100" height="100" border="0"></a>
</div>
</div>
</div>
<div id="down_background">Copyright 2005 dinGee Media. All rights reserved</div>
<div id="edit_02"></div>
</div>
</body>
</html>



这是 CSS 代码
#top_background {
	background-attachment: scroll;
	background-image: url(index_pic/top_background.gif);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	height: 184px;
	width: 888px;
	left: 40px;
	top: 40px;
	overflow: visible;
	visibility: visible;
	z-index: 2;
}
#menu_button {
	position: absolute;
	overflow: visible;
	visibility: visible;
	z-index: 3;
	left: 25px;
	top: 94px;
}
#menu_button a:link {
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 28px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background-attachment: scroll;
	background-image: url(index_pic/button_link.gif);
	background-repeat: no-repeat;
	text-align: center;
	overflow: visible;
	visibility: visible;
	height: 28px;
	width: 105px;
}
#menu_button a:visited {
	position: absolute;
	overflow: visible;
	visibility: visible;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 28px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background-attachment: scroll;
	background-image: url(index_pic/button_link.gif);
	background-repeat: no-repeat;
	height: 28px;
	width: 105px;
	text-align: center;
}
#menu_button a:hover {
	position: absolute;
	overflow: visible;
	visibility: visible;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 28px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background-attachment: scroll;
	background-image: url(index_pic/button_hover.gif);
	background-repeat: repeat;
	height: 28px;
	width: 105px;
	text-align: center;
}
#menu_button a:active{
	position: absolute;
	overflow: visible;
	visibility: visible;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 28px;
	font-weight: bold;
	color: #EFF7FF;
	background-attachment: scroll;
	background-image: url(index_pic/button_ative.gif);
	background-repeat: no-repeat;
	text-align: center;
	height: 28px;
	width: 105px;
	text-decoration: none;
}
#button_index {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 10;
	left: 0px;
	height: 28px;
	width: 105px;
}
#button_news {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 11;
	left: 105px;
	height: 28px;
	width: 105px;
}
#button_profile {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 12;
	left: 210px;
	height: 28px;
	width: 105px;
}
#button_gallery {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 13;
	left: 315px;
	height: 28px;
	width: 105px;
}
#button_film {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 14;
	left: 420px;
	height: 28px;
	width: 105px;
}
#button_video {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 15;
	left: 525px;
	height: 28px;
	width: 105px;
}
#button_special {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 16;
	left: 630px;
	height: 28px;
	width: 105px;
}
#button_info {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 17;
	left: 735px;
	height: 28px;
	width: 105px;
}
#title_01 {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 4;
	left: 25px;
	top: 130px;
	font-family: Arial, Helvetica, sans-serif;
	color: #4271AD;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	background-attachment: scroll;
	background-image: url(index_pic/logo_back.gif);
	background-repeat: no-repeat;
	padding-left: 35px;
	line-height: 25px;
}
#title_02 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	overflow: visible;
	visibility: visible;
	z-index: 5;
	position: absolute;
	top: 166px;
	left: 760px;
}
#mid_background {
	overflow: visible;
	visibility: visible;
	z-index: 6;
	position: absolute;
	width: 888px;
	top: 224px;
	left: 40px;
	padding-bottom: 40px;
}
#back_button {
	overflow: visible;
	visibility: visible;
	position: relative;
	background-attachment: scroll;
	background-image: url(index_pic/mid_background.gif);
	background-repeat: repeat-y;
	background-position: left top;
	padding-left: 45px;
	padding-right: 220px;
	z-index: 18;
	padding-top: 1px;
	padding-bottom: 10px;
}
#back_button a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 20px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	background-attachment: scroll;
	background-image: url(index_pic/back_link.gif);
	background-repeat: no-repeat;
	text-align: center;
	overflow: visible;
	position: absolute;
	visibility: visible;
	height: 20px;
	width: 60px;
}
#back_button a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 20px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	background-attachment: scroll;
	background-image: url(index_pic/back_link.gif);
	background-repeat: no-repeat;
	text-align: center;
	overflow: visible;
	position: absolute;
	visibility: visible;
	height: 20px;
	width: 60px;
}
#back_button a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 20px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	background-attachment: scroll;
	background-image: url(index_pic/back_hover.gif);
	background-repeat: no-repeat;
	text-align: center;
	overflow: visible;
	position: absolute;
	visibility: visible;
	height: 20px;
	width: 60px;
}
#back_button a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 20px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	background-attachment: scroll;
	background-image: url(index_pic/back_active.gif);
	background-repeat: no-repeat;
	text-align: center;
	overflow: visible;
	position: absolute;
	visibility: visible;
	height: 20px;
	width: 60px;
}
#edit_01 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	overflow: visible;
	visibility: visible;
	z-index: 7;
	position: relative;
	background-attachment: scroll;
	background-image: url(index_pic/mid_background.gif);
	background-repeat: repeat-y;
	background-position: left top;
	padding-left: 45px;
	padding-right: 220px;
	padding-bottom: 25px;
	padding-top: 10px;
}
#edit_01 a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #0000FF;
	text-decoration: none;
}
#edit_01 a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #000099;
	text-decoration: none;
}
#edit_01 a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FF0000;
	text-decoration: none;
}
#edit_01 a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FF0000;
	text-decoration: none;
}
#piclist_01 {
	position: relative;
	width: 100px;
	left: 0px;
	top: 0px;
}
#piclist_02 {
	position: absolute;
	width: 100px;
	left: 120px;
	top: 0px;
}
#piclist_03 {
	position: absolute;
	width: 100px;
	left: 240px;
	top: 0px;
}
#piclist_04 {
	position: absolute;
	width: 100px;
	left: 360px;
	top: 0px;
}
#piclist_05 {
	position: absolute;
	width: 100px;
	left: 480px;
	top: 0px;
}
#piclist_01 a:link {
	padding-left: 16px;
	background-attachment: scroll;
	background-image: url(index_pic/piclist_01_link.gif);
	background-repeat: no-repeat;
}
#piclist_01 a:visited {
	padding-left: 16px;
	background-attachment: scroll;
	background-image: url(index_pic/piclist_01_visited.gif);
	background-repeat: no-repeat;
}
#piclist_01 a:hover {
	background-attachment: scroll;
	background-image: url(index_pic/piclist_01_hover.gif);
	background-repeat: no-repeat;
	padding-left: 16px;
}
#piclist_01 a:active {
	background-attachment: scroll;
	background-image: url(index_pic/piclist_01_active.gif);
	background-repeat: no-repeat;
	padding-left: 16px;
}
#edit_02 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: 8;
	left: 693px;
	top: 0px;
	padding: 16px;
	line-height: 14px;
}
#edit_02 a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #0000FF;
	text-decoration: none;
	line-height: 14px;
	padding-left: 16px;
}
#edit_02 a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #000099;
	text-decoration: none;
	line-height: 14px;
	background-attachment: scroll;
	background-image: url(index_pic/edit_02_visited.gif);
	background-repeat: no-repeat;
	padding-left: 16px;
}
#edit_02 a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FF0000;
	text-decoration: none;
	line-height: 14px;
	background-attachment: scroll;
	background-image: url(index_pic/edit_02_hover.gif);
	background-repeat: no-repeat;
	padding-left: 16px;
}
#edit_02 a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FF0000;
	text-decoration: none;
	line-height: 14px;
	background-attachment: scroll;
	background-image: url(index_pic/edit_02_active.gif);
	background-repeat: no-repeat;
	padding-left: 16px;
}
#down_background {
	background-attachment: scroll;
	background-image: url(index_pic/down_background.gif);
	background-repeat: no-repeat;
	background-position: left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
	overflow: visible;
	visibility: visible;
	position: relative;
	line-height: 28px;
	z-index: 9;
	height: 31px;
}
H1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	background-attachment: scroll;
	background-image: url(index_pic/h1.gif);
	background-repeat: no-repeat;
	color: #FFFFFF;
	line-height: 20px;
	padding-left: 25px;
}
H2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	background-attachment: scroll;
	background-image: url(index_pic/h2.gif);
	background-repeat: no-repeat;
	color: #FFFFFF;
	line-height: 20px;
	padding-left: 12px;
	height: 20px;
	width: 160px;
}
H3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	background-attachment: scroll;
	background-image: url(index_pic/h3.gif);
	background-repeat: no-repeat;
	color: #FFFFFF;
	line-height: 20px;
	padding-left: 16px;
}
UL {
	list-style-image: url(index_pic/ul.gif);
}
UL a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #0000FF;
	text-decoration: none;
	line-height: 14px;
	padding-left: 16px;
}
UL a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #000099;
	text-decoration: none;
	line-height: 14px;
	padding-left: 16px;
	background-attachment: scroll;
	background-image: url(index_pic/ul_visited.gif);
	background-repeat: no-repeat;
}
UL a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FF0000;
	text-decoration: none;
	line-height: 14px;
	background-attachment: scroll;
	background-image: url(index_pic/ul_hover.gif);
	background-repeat: no-repeat;
	padding-left: 16px;
}
UL a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FF0000;
	text-decoration: none;
	line-height: 14px;
	background-attachment: scroll;
	background-image: url(index_pic/ul_active.gif);
	background-repeat: no-repeat;
	padding-left: 16px;
}
BODY {
	background-attachment: fixed;
	background-image: url(index_pic/body_background.jpg);
	background-repeat: no-repeat;
}
2005-04-11 03:50
写私信
2楼#
注意到没有?你的 a 定义了高度属性 “height”,
但是由于a默认下是内联元素inline, 所以无法定义高度。

可以这样:
a
{
 display:block ; /*把a变成块级元素*/
 height:100px;
 float:left;
}

注意,由于现在a通过float来平铺,所以紧接a的元素应该clear:both 一下,以免出现排版混乱。
欢迎光临我的小blog: http://blog.csdn.net/melop
2005-04-11 03:50
写私信
3楼#
1、如楼上所说, a 标签是内联元素,对其设置宽高是没有作用的,背景图片出现位置的差异是由 FF 和 IE 在处理内联元素的内补丁 (padding) 的不同造成的(抱歉俺也不清楚谁解析的是正确的),楼主可以给 a 一个背景颜色,就明白区别在哪里了。把块级元素用 float 平铺是一个很有用的做法,可以做出自适应宽度的阵列。俺这里有一个类似楼主页面内容的演示: http://3eye.name/mmf/np1.htm

2、如果 a:link 不设置背景图,则 a:hover 等伪类的背景图就无法显示,这应该是 IE 的 bug ,至于 IE 正常的情况俺这里没能重现,怀疑是不是楼主有笔误。

3、对 div 的看法呢~~私以为, div 的使用也是要适度的,用 div 是为了文档结构清晰,而不应该为排版而过分使用的。至于显示速度问题,和浏览器内核有关,不好一概而论,比如当背景图片设置为 fixed 的时候, FF 滚动文本的速度反而不如 IE 。总的来说,页面结构越简单越好。

然后呢,是给楼主的点点建议^^  
第一,俺觉得过多的使用 div 的绝对定位不是好习惯,虽然这样使得排版工作变得很简单,但是会使得页面的灵活性降低,比如当需要对象的位置可以相对于其他元素动态改变位置的时候,使用绝对定位反而就不方便了。想象一下,如果楼主的这个页面需要总是居中的,应该怎么做?
二呢,楼主应该在 CSS 的优化上下些功夫,现在的 CSS 里面有太多的冗余、无意义的定义,虽然 CSS 可以缓存下来,但是第一次读的时候花比较长的时间也挺要命的。俺觉得至少能减到现在的三分之一大小以下。

完毕,欢迎讨论^^
2005-04-11 03:50
写私信
4楼#
非常感谢。

a 主要是想让文字位于背景图片的中心,今天重新设置了一下,发现 line-height 就实现了这个效果,height 确实比较多余,而且没用,呵呵。

图像横向平铺我用了

background-attachment: scroll;
background-image: url(index_pic/piclist_link.gif);
background-repeat: no-repeat;
padding: 5px;
display: inline;
float:left;

(以前用了五个层纵向排列实现这个效果,经两位大侠指点,现在看来那个设计真的很笨,HeHe      

因为背景比图片宽高10px,我想实现的背景包围图片的效果,现在在 Firefox 里面也显示正常了。(以前 IE 正常,但是 Firefox 的背景会往下掉一半)

但是问题也来了,float:left; 这个值似乎会让有图片这个层跳出父层(就是嵌套在上一个的层),结果就像被子下面破了个洞,图片全部流出来了。

如果不用 float:left; 就会出现 Firefox 背景往下掉一半的情况。(这个应该是父层的问题,结果被遗传下来了,因为单独制作的层没有这个问题)
所以只好暂时照顾 IE,没用  float:left。
http://carlng.nease.net/carl/filmograph ... /index.htm

导航栏部分参考了 Mozilla 的网站,用了列表标记,只用了一个层。
<ul>
<li><a href="index.htm">首页</a>
<li><a href="news/index.htm">新闻</a>
<li><a href="profile/index.htm">资料</a>
<li><a href="gallery/index.htm">图库</a>
<li><a href="filmography/index.htm">剧照</a>
<li><a href="video/index.htm">视频</a>
<li><a href="special/index.htm">特别</a>
<li><a href="info/index.htm">信息</a>
</ul>
现在看来这串代码真的是太幼稚了,脸红 ing……。
<div id="button_index"><a href="../../index.htm">首页</a></div>
<div id="button_news"><a href="../../news/index.htm">新闻</a></div>
<div id="button_profile"><a href="../../profile/index.htm">资料</a></div>
<div id="button_gallery"><a href="../index.htm">图库</a></div>
<div id="button_film"><a href="../../filmography/index.htm">剧照</a></div>
<div id="button_video"><a href="../../video/index.htm">视频</a></div>
<div id="button_special"><a href="../../special/index.htm">特别</a></div>
<div id="button_info"><a href="../../info/index.htm">信息</a></div>

由于这个网站以前是用表格排版的,DIV 布局也沿用了以前的内容分布,所以问题不少。
我现在用 CSS 完全是在碰运气,哪个参数试出来效果好就用哪个,汗………………

关于那个 IE edit_02 右侧导航栏, a:link 不设背景图片,就不能显示 a:hover 的背景图片的问题。我现在直接把 a:link 的背景图片制作为和背景相同的颜色就行了,算是变相解决了问题。
http://carlng.nease.net/carl/info/index.htm

关于 CSS 的优化,经过不懈努力,终于减小了 1kb ,汗………………:mrgreen:        

昨天下午跑去书店看有没有介绍 Web 标准网页制作的书,结果全部都是讲 Dreamweaver 的,以前也认为网页制作就是 Dreamweaver,Frontpage 之类的,现在看来根本不是那么一回事。
现在最想要得就是结合 Dreamweaver 制作 Web 标准网页的教程,因为我还脱离不了 Dreamweaver。以后还得抽空继续研究研究,我发觉 CSS 真的是个有趣的技术。

再次感谢各位大侠的指点。
2005-04-11 03:50
写私信
5楼#
定义了 float 有时候会发生 “溢出” 的现象,其实 melop 已经说出了解决的办法了,就是在使用 float 的元素后面接一个具有 clear:both; 样式的元素即可。

dw 终究只是个工具而已,你可以试试在 dw 里直接手写样式表,因为有自动完成功能,用熟了以后不比在属性面板里慢哦。

PS. 昨天刚看到的这篇文章,感觉巨有用啊,不知你看过没有
http://www.w3cn.org/article/translate/2005/104.html
2005-04-11 03:50
写私信
6楼#
Thanks!

我在div 里面用了

display: inline;
float:left;

然后跟了一个
<br style="clear:both">

这次 Firefox 里面显示正常了,但是IE里面又出问题了,所有图片居然跑到父层的下面去了,大部分图片都被遮盖掉了。

这是什么原因呢???

http://din.nease.net/carl/filmography/j ... /index.htm
2005-04-11 03:50
写私信
7楼#
咔咔…… css 看的俺头晕了,图像阵列那里不用定义那么多次的,查错也困难。

猜想一下:可能是因为你在 div 上使用了 z-index 而使的叠放次序出现问题;

另,
display: inline;
float:left;
这里的 display:inline; 就没必要写了,因为一旦使用了浮动,浏览器就会把元素当作块对象处理, display 属性被忽略。

缩略图阵列,这样定义就可以了(只是个大概,没具体写):
#piclist ul { list-style-type:none; padding:0; margin:0; }
#piclist li { width:xxx; height:xxx; float:left; }
#piclist a { display:block; height:xxx;
	background:scroll url(index_pic/piclist_link.gif) no-repeat; padding:xxx; ... }
#piclist a:visited { background:... }
#piclist a:hover { background:... }
#piclist a:active { background:... }
2005-04-11 03:50
写私信
8楼#
应该不是 z-index 的问题,我把 z-index 的值都删了之后,还是出来不了。

关于

display: inline;
float:left;

我发现 inline 是有效的啊,不过它的作用和 block 一样了。

是这样的,因为我在父层定义了列表的项目符号,发现如果不用 display: inline;,那个项目符号同样会出现在子层的图片里面,很难看。
就算在子层里面定义了 list-style-type:none; ,父层的列表项目符号同样去不掉。
只有在子层里面设定 display: inline; 才能去掉,而且 ie,ff 都可以。

不解?
2005-04-11 03:50
写私信
9楼#
找到问题所在了,原因是在 div#edit_01 中定义了 position:relative; 属性。俺觉得这可能也是 IE 的错误解析,相对位置会把对象从文档中 “拉” 出来,但是不应该覆盖在其子元素之上。

list-style-type:none; 是对 ul 或 li 标签作用的,设置无误的话列表豆就不应该出现,与 display:inline; 无直接关系(估计是影响了豆显示的位置,所以看不见)。

建议还是重写一下 css 吧,现在很多的重定义也会引发问题。 div#piclist 可以去掉, ul 标签就可以起到他的作用了。
2005-04-11 03:50
写私信
10楼#
非常感谢大侠指点,总算解决了这个问题。

把 relative 去掉了之后,div#piclist 的图层就显示出来了,但是相当怪异,完全不受父层控制,宽度超出了父层。

所以我又只好设定一个

#piclist {
width: 600px;
}

把它匡到父层宽度里面来,这样就不会超出去了。

display: inline;  这个也算是歪打正着吧,还好达到目的了,汗…………

#piclist 我还不能去掉,因为父层 edit_01 也定义了 ul 标签的(主要是针对文字列表),去掉了就会沿用 edit_01 ul 的定义。

刚才又把 CSS 清理了一下,曾如大侠所言,体积确实减小了不少,只有 7kb 了。

这个站点的 CSS 重写对我来说太恐怖了点,还是写个比较简单的站点来练习 CSS,嘿嘿……
2005-04-11 03:50
写私信
11楼#
大侠不敢当,只是做的多了,仍在学习中^^
多多交流,多多交流~
2005-04-11 03:50
写私信
12楼#
你的css写的太乱了,多用一些缩写的方法,如字体就不用每次都定义
body div{
font-family:verdana;
margin:0px;
padding:0px;
}
#id1,#id2,#id3{
/*一起定义等等*/
}
下面是一篇很好的关于怎么缩写css的文章
http://www.w3cn.org/article/tips/2005/103.html
如果读完以后再加上实践总结技巧会对你很有帮助的。