|
阅读：6797回复：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 主要是想让文字位于背景图片的中心，今天重新设置了一下，发现 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 真的是个有趣的技术。 再次感谢各位大侠的指点。 |
|
|
3楼#
发布于：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 |
|
|
4楼#
发布于：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 都可以。 不解？ |
|
|
5楼#
发布于：2005-04-11 03:50
非常感谢大侠指点，总算解决了这个问题。
把 relative 去掉了之后，div#piclist 的图层就显示出来了，但是相当怪异，完全不受父层控制，宽度超出了父层。 所以我又只好设定一个 #piclist { width: 600px; } 把它匡到父层宽度里面来，这样就不会超出去了。 display: inline; 这个也算是歪打正着吧，还好达到目的了，汗………… #piclist 我还不能去掉，因为父层 edit_01 也定义了 ul 标签的（主要是针对文字列表），去掉了就会沿用 edit_01 ul 的定义。 刚才又把 CSS 清理了一下，曾如大侠所言，体积确实减小了不少，只有 7kb 了。 这个站点的 CSS 重写对我来说太恐怖了点，还是写个比较简单的站点来练习 CSS，嘿嘿…… |
|
