div无故被动态改变

kaphoon 2008-03-09 10:21:26

	                

	            <div id='webmaster' class='box' >

	                <ul>    

	                    <li><a href='' target='_blank'>123456789</a></li>                

	                    <li><a href='' target='_blank'>3456789</a></li>          

	                    <li><a href='' target='_blank'>56789</a></li>

	                    <li><a href='/member.php' target='_blank'>7890</a></li>        

	                </ul>                

	           </div>

症状：1.当鼠标从第四行移向第三行时，div的高度变小，再回到第四行时，div高度又恢复正常。
2.当我把第四行中的href清空(即href='')，又一切正常。

请问，这是由什么造成的？

...全文

176 20 打赏收藏举报

写回复

20 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

kaphoon 2008-03-21

多谢 silence2k.
在下CSS新人。自己从头写CSS对我来讲比较难,不过，我正在学习。谢谢您的提醒。

之前说，追加100分。可是结贴时，没办法给您，实在不好意思。记得以前可以在社区银行里面可以给予的，我马上就试一下！

打赏
举报

回复赞

silence2k 2008-03-21

没关系了呵呵以后有问题再提到时候顺道给点分行了

打赏
举报

回复赞

silence2k 2008-03-14

你的css 借用别人的
但应该整理下挺乱
自己从新些
问题很容易解决

打赏
举报

回复赞

silence2k 2008-03-14

如果去掉背景
a,
a:link,
a:active 中的 background-color: white;
那么也不能设置除了黑色以外的其他颜色
[怀疑:可能是在颜色变化中使<ul>中的变色的那个<li>导致ul的高度就变化了具体的还是没很明白]

解决办法
在 typo.css 文件中
添加
ul,ol,dl {float:left}

打赏
举报

回复赞

silence2k 2008-03-13

去掉 width: 185px;
也不会跳了
下回再看....

打赏
举报

回复赞

silence2k 2008-03-13

仔细看了看还是发现
最根本原因是
homepage.css中
div.box
宽度定义有问题
width: 185px;

打赏
举报

回复赞

silence2k 2008-03-13

的确去掉

a,
a:link,
a:active {
text-decoration: none;

color: blue;
background-color: white;
}
中的 background-color: white; 即可

打赏
举报

回复赞

silence2k 2008-03-13

在 typo.css 文件中有问题

去掉以下就不跳了稍等再看具体原因

/* LINKS */
a,
a:link,
a:active {
text-decoration: none;

color: blue;
background-color: white;
}
a:visited {
color: purple;
background-color: transparent;
}
a:hover {
text-decoration: none;

color: white;
background-color: black;
}
/* END LINKS */

打赏
举报

回复赞

kaphoon 2008-03-11

我发现，把a:hover中的background-color注释掉，就OK啦，颜色怎么会引起div高度的改变？
a:hover {
text-decoration: none;

color: white;
/*background-color: black;*/
}

打赏
举报

回复赞

一把编程的菜刀 2008-03-11

你不用li和ul，你用多个DIV代替应该就不会出现这问题了

打赏
举报

回复赞

kaphoon 2008-03-11

index.php中并没有使用任何的js代码。

打赏
举报

回复赞

一把编程的菜刀 2008-03-11

你不单只是一个，左边2个都不行

打赏
举报

回复赞

一把编程的菜刀 2008-03-11

应该是你的JS或者别的地方影响了
单你上面贴出来的代码是没有问题的

打赏
举报

回复赞

回.到.未来 2008-03-10

这代码贴成一行没法看啊

打赏
举报

回复赞

kaphoon 2008-03-10

http://y116708.51host.net/ 左下角的那个box。

谁能解决这个问题，再追加100分！：）

打赏
举报

回复赞

kaphoon 2008-03-10

我也不想的：）
麻烦，按照四楼的方法下载文件。
谢谢！

打赏
举报

回复赞

kaphoon 2008-03-09

我用了网上的一个CSS Framework.
我用IE Developer Tool把webmaster那个div的信息输出了出来。
1. 下载文件http://uploadfile.org/download.php?id=ozVTVKkRcQ8mz7kS2pB1
2. 把后缀名改为html.

谢谢！

打赏
举报

回复赞

kaphoon 2008-03-09



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=GB2312"> <HTML dir="ltr" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><HEAD><STYLE> /* Rule 2 of framework/typo.css */ DIV {	FONT-SIZE: 1em} /* Rule 4 of framework/tools.css */ .clearfix {	DISPLAY: inline-block} /* Rule 5 of framework/tools.css */ .clearfix {	DISPLAY: block} /* Rule 2 of framework/layout-navtop-localleft.css */ DIV#main {	DISPLAY: inline;	FLOAT: right;	WIDTH: 500px} /* Rule 7 of framework/layout.css */ DIV#main {	} /* Rule 4 of /css/homepage.css */ DIV#main {	MARGIN-TOP: 50px;	DISPLAY: inline;	FLOAT: left;	WIDTH: 95%} /* Rule 1 of framework/layout-navtop-localleft.css */ DIV#content {	PADDING-RIGHT: 0px;	PADDING-LEFT: 0px;	PADDING-BOTTOM: 0px;	MARGIN: 0px auto 20px;	WIDTH: 701px;	PADDING-TOP: 0px;	POSITION: relative;	TEXT-ALIGN: left} /* Rule 6 of framework/layout.css */ DIV#content {	} /* Rule 3 of /css/homepage.css */ DIV#content {	PADDING-RIGHT: 0px;	PADDING-LEFT: 0px;	PADDING-BOTTOM: 0px;	MARGIN: 0px 0px 0px 20px;	WIDTH: 95%;	PADDING-TOP: 0px;	POSITION: relative;	TEXT-ALIGN: left} /* Rule 2 of framework/layout.css */ DIV#page {	PADDING-RIGHT: 0px;	PADDING-LEFT: 0px;	BACKGROUND: white;	PADDING-BOTTOM: 0px;	MARGIN: 0px auto;	WIDTH: 90%;	PADDING-TOP: 0px;	TEXT-ALIGN: center} /* Rule 1 of framework/typo.css */ BODY {	FONT-SIZE: 76%;	COLOR: #333;	LINE-HEIGHT: 1em;	FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;	TEXT-ALIGN: left} /* Rule 1 of framework/layout.css */ BODY {	PADDING-RIGHT: 0px;	PADDING-LEFT: 0px;	BACKGROUND: white;	PADDING-BOTTOM: 0px;	MARGIN: 0px;	PADDING-TOP: 0px;	TEXT-ALIGN: center} /* Rule 1 of /css/homepage.css */ DIV.box {	BORDER-RIGHT: #a8bacd 1px solid;	PADDING-RIGHT: 1px;	BORDER-TOP: #a8bacd 1px solid;	PADDING-LEFT: 1px;	MARGIN-BOTTOM: 10px;	PADDING-BOTTOM: 1px;	MARGIN-LEFT: 1px;	BORDER-LEFT: #a8bacd 1px solid;	WIDTH: 185px;	PADDING-TOP: 1px;	BORDER-BOTTOM: #a8bacd 1px solid;	POSITION: relative} /* Rule 23 of framework/typo.css */ UL {	PADDING-RIGHT: 0px;	PADDING-LEFT: 0px;	PADDING-BOTTOM: 0px;	MARGIN: 0px 0px 1.5em;	LINE-HEIGHT: 1.4em;	PADDING-TOP: 0px} /* Rule 24 of framework/typo.css */ UL LI {	PADDING-RIGHT: 0px;	PADDING-LEFT: 0px;	PADDING-BOTTOM: 0px;	MARGIN: 0px 0px 0.25em 30px;	PADDING-TOP: 0px} /* Rule 4 of framework/typo.css */ A {	COLOR: blue;	BACKGROUND-COLOR: white;	TEXT-DECORATION: none} /* Rule 5 of framework/typo.css */ A:link {	COLOR: blue;	BACKGROUND-COLOR: white;	TEXT-DECORATION: none} /* Rule 8 of /css/info.css */ A {	TEXT-DECORATION: none} /* Rule 11 of framework/typo.css */ H3 {	PADDING-RIGHT: 0px;	PADDING-LEFT: 0px;	FONT-SIZE: 1.3em;	PADDING-BOTTOM: 0px;	MARGIN: 0px 0px 0.5em;	COLOR: black;	LINE-HEIGHT: 1.3em;	PADDING-TOP: 0px} /* Rule 2 of /css/homepage.css */ DIV.box H3 {	PADDING-RIGHT: 0px;	PADDING-LEFT: 0px;	FONT-WEIGHT: normal;	FONT-SIZE: 12px;	BACKGROUND-IMAGE: url(/images/bg_box_title.png);	PADDING-BOTTOM: 2px;	PADDING-TOP: 2px;	BORDER-BOTTOM: #a8bacd 1px solid;	TEXT-ALIGN: center} </STYLE></HEAD><BODY><DIV id="page"><DIV class="clearfix" id="content"><DIV id="main"><DIV class="clearfix"><DIV style="FLOAT: left"> <DIV class="box" id="webmaster"><H3>GD.cn黑板报</H3><UL><LI><A href="http://localhost/" target="_blank">123456789</A> </LI><LI><A href="http://localhost/" target="_blank">3456789</A> </LI><LI><A href="http://localhost/" target="_blank">56789</A> </LI><LI><A href="http://localhost/member.php" target="_blank">7890</A> </LI></UL></DIV> </DIV></DIV></DIV></DIV></DIV></BODY></HTML>