|
阅读：6785回复：12
请教一下，CSS 显示有点问题，不太明白，谢谢了
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 |
|
|
1楼#
发布于：2005-04-11 03:50
这是网页源码
<!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;
} |
|
|
2楼#
发布于：2005-04-11 03:50
注意到没有？你的 a 定义了高度属性 “height”,
但是由于a默认下是内联元素inline, 所以无法定义高度。 可以这样： a { display:block ; /*把a变成块级元素*/ height:100px; float:left; } 注意，由于现在a通过float来平铺，所以紧接a的元素应该clear:both 一下，以免出现排版混乱。 |
|
|
|
3楼#
发布于：2005-04-11 03:50
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 可以缓存下来，但是第一次读的时候花比较长的时间也挺要命的。俺觉得至少能减到现在的三分之一大小以下。 完毕，欢迎讨论^^ |
|
|
4楼#
发布于：2005-04-11 03:50
非常感谢。
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 真的是个有趣的技术。 再次感谢各位大侠的指点。 |
|
|
5楼#
发布于：2005-04-11 03:50
定义了 float 有时候会发生 “溢出” 的现象，其实 melop 已经说出了解决的办法了，就是在使用 float 的元素后面接一个具有 clear:both; 样式的元素即可。
dw 终究只是个工具而已，你可以试试在 dw 里直接手写样式表，因为有自动完成功能，用熟了以后不比在属性面板里慢哦。 PS. 昨天刚看到的这篇文章，感觉巨有用啊，不知你看过没有
http://www.w3cn.org/article/translate/2005/104.html |
|
|
6楼#
发布于：2005-04-11 03:50
Thanks！
我在div 里面用了 display: inline; float:left; 然后跟了一个 <br style="clear:both"> 这次 Firefox 里面显示正常了，但是IE里面又出问题了，所有图片居然跑到父层的下面去了，大部分图片都被遮盖掉了。 这是什么原因呢？？？ http://din.nease.net/carl/filmography/j ... /index.htm |
|
|
7楼#
发布于：2005-04-11 03:50
咔咔…… 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:... } |
|
|
8楼#
发布于：2005-04-11 03:50
应该不是 z-index 的问题，我把 z-index 的值都删了之后，还是出来不了。
关于 display: inline; float:left; 我发现 inline 是有效的啊，不过它的作用和 block 一样了。 是这样的，因为我在父层定义了列表的项目符号，发现如果不用 display: inline;，那个项目符号同样会出现在子层的图片里面，很难看。 就算在子层里面定义了 list-style-type:none; ，父层的列表项目符号同样去不掉。 只有在子层里面设定 display: inline; 才能去掉，而且 ie,ff 都可以。 不解？ |
|
|
9楼#
发布于：2005-04-11 03:50
找到问题所在了，原因是在 div#edit_01 中定义了 position:relative; 属性。俺觉得这可能也是 IE 的错误解析，相对位置会把对象从文档中 “拉” 出来，但是不应该覆盖在其子元素之上。
list-style-type:none; 是对 ul 或 li 标签作用的，设置无误的话列表豆就不应该出现，与 display:inline; 无直接关系（估计是影响了豆显示的位置，所以看不见）。 建议还是重写一下 css 吧，现在很多的重定义也会引发问题。 div#piclist 可以去掉， ul 标签就可以起到他的作用了。 |
|
|
10楼#
发布于：2005-04-11 03:50
非常感谢大侠指点，总算解决了这个问题。
把 relative 去掉了之后，div#piclist 的图层就显示出来了，但是相当怪异，完全不受父层控制，宽度超出了父层。 所以我又只好设定一个 #piclist { width: 600px; } 把它匡到父层宽度里面来，这样就不会超出去了。 display: inline; 这个也算是歪打正着吧，还好达到目的了，汗………… #piclist 我还不能去掉，因为父层 edit_01 也定义了 ul 标签的（主要是针对文字列表），去掉了就会沿用 edit_01 ul 的定义。 刚才又把 CSS 清理了一下，曾如大侠所言，体积确实减小了不少，只有 7kb 了。 这个站点的 CSS 重写对我来说太恐怖了点，还是写个比较简单的站点来练习 CSS，嘿嘿…… |
|
|
11楼#
发布于：2005-04-11 03:50
大侠不敢当，只是做的多了，仍在学习中^^
多多交流，多多交流～ |
|
|
12楼#
发布于：2005-04-11 03:50
你的css写的太乱了，多用一些缩写的方法，如字体就不用每次都定义
body div{ font-family:verdana; margin:0px; padding:0px; } #id1,#id2,#id3{ /*一起定义等等*/ } 下面是一篇很好的关于怎么缩写css的文章 http://www.w3cn.org/article/tips/2005/103.html 如果读完以后再加上实践总结技巧会对你很有帮助的。 |
|
