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