HTML DIV百分比宽度奇奇怪怪的间距产生了?

a596643025 2014-07-16 01:04:00
最近做站的时候要做个用户卡,顺着自己做的DEMO做,本来DEMO好好的结果放到测试站点里面变成这样...
DEMO运行的时候好好的啊,下面这图不是DEMO本体,是直接从站点上面扒下来的HTML代码然后在源文件里面加上CSS的效果
说白了是个Discuz论坛拉,但是为何会出现这种莫名其妙的间距问题,我去百度了很多也没找到。好像是显示模式引发的,但是在DEMO里面用同样的显示模式一点问题也没有。我之所以这样讲是因为当display模式设置成flex以后就没有了这些间距。
源码文件的话我发一下,用以替换discuz论坛里面的header_userstatus.htm还有header.htm在回复里面发吧,长度过了。

<!--{if $_G['uid']}-->
<div id="um">
<div class="avt y" style="display:none;"><a href="home.php?mod=space&uid=$_G[uid]"><!--{avatar($_G[uid],small)}--></a></div>
<div id="d_avt_menu">
<div class="d_upt">
<strong class="vwmy{if $_G['setting']['connect']['allow'] && $_G[member][conisbind]} qq{/if}"><a href="home.php?mod=space&uid=$_G[uid]" target="_blank" title="{lang visit_my_space}"class="showmenu" onmouseover="showMenu({'ctrlid':'myitem'});">{$_G[member][username]}</a></strong>
<!--{if $_G['group']['allowinvisible']}-->
<span id="loginstatus">
<a id="loginstatusid" href="member.php?mod=switchstatus" title="{lang login_switch_invisible_mode}" onclick="ajaxget(this.href, 'loginstatus');return false;" class="xi2"></a>
</span>
<!--{/if}-->
<div>
<!--{hook/global_usernav_extra1}-->
</div>
</div>
<div class="d_upm">
<!--{hook/global_usernav_extra4}-->
<div class="d_upmr d_upmr1">
<!--{if $_G['uid']}-->
<div><a href="home.php?mod=space&do=pm" id="pm_ntc" style="background-repeat: no-repeat; background-position: 0 50%;"><em class="prompt_news{if empty($_G[member][newpm])}_0{/if}"></em>{lang pm_center}</a></div>
<div><a href="home.php?mod=follow&do=follower"><em class="prompt_follower{if empty($_G[member][newprompt_num][follower])}_0{/if}"></em><!--{lang notice_interactive_follower}-->{if $_G[member][newprompt_num][follower]}($_G[member][newprompt_num][follower]){/if}</a></div>
<!--{if $_G[member][newprompt] && $_G[member][newprompt_num][follow]}-->
<div><a href="home.php?mod=follow"><em class="prompt_concern"></em><!--{lang notice_interactive_follow}-->($_G[member][newprompt_num][follow])</a></div>
<!--{/if}-->
<!--{if $_G[member][newprompt]}-->
<!--{loop $_G['member']['category_num'] $key $val}-->
<div><a href="home.php?mod=space&do=notice&view=$key"><em class="notice_$key"></em><!--{echo lang('template', 'notice_'.$key)}-->(<span class="rq">$val</span>)</a></div>
<!--{/loop}-->
<!--{/if}-->
<!--{if empty($_G['cookie']['ignore_notice'])}-->
<div class="ignore_noticeli"><a href="javascript:;" onclick="setcookie('ignore_notice', 1);hideMenu('myprompt_menu')" title="{lang temporarily_to_remind}"><em class="ignore_notice"></em></a></div>
<!--{/if}-->
<!--{/if}-->
<!--{if $_G['setting']['taskon'] && !empty($_G['cookie']['taskdoing_'.$_G['uid']])}--><div><a href="home.php?mod=task&item=doing" id="task_ntc" class="new">{lang task_doing}</a></div><!--{/if}-->
<!--{if ($_G['group']['allowmanagearticle'] || $_G['group']['allowpostarticle'] || $_G['group']['allowdiy'] || getstatus($_G['member']['allowadmincp'], 4) || getstatus($_G['member']['allowadmincp'], 6) || getstatus($_G['member']['allowadmincp'], 2) || getstatus($_G['member']['allowadmincp'], 3))}-->
<div><a href="portal.php?mod=portalcp"><!--{if $_G['setting']['portalstatus'] }-->{lang portal_manage}<!--{else}-->{lang portal_block_manage}<!--{/if}--></a></div>
<!--{/if}-->
</div>
<div class="d_upmr d_upmr2">
<div><a href="javascript:;" id="myitem" class="showmenu" onmouseover="showMenu({'ctrlid':'myitem'});">{lang myitem}</a></div>
<div><a href="home.php?mod=spacecp">{lang setup}</a></div>
<!--{if $_G['uid'] && $_G['group']['radminid'] > 1}-->
<div>
<a href="forum.php?mod=modcp&fid=$_G[fid]" target="_blank">{lang forum_manager}</a>
</div>
<!--{/if}-->
<!--{if $_G['uid'] && getstatus($_G['member']['allowadmincp'], 1)}-->
<div>
<a href="admin.php" target="_blank">{lang admincp}</a>
</div>
<!--{/if}-->
</div>
<!--{hook/global_usernav_extra2}-->
</div>
<div class="d_upb">
<!--{hook/global_usernav_extra3}-->
<div><a href="home.php?mod=spacecp&ac=credit&showcredit=1" id="extcreditmenu"{if !$_G[setting][bbclosed]} onmouseover="delayShow(this, showCreditmenu);" class="showmenu"{/if}>{lang credits}: $_G[member][credits]</a></div>
<div><a href="home.php?mod=spacecp&ac=usergroup" id="g_upmine" class="showmenu" onmouseover="delayShow(this, showUpgradeinfo)">{lang usergroup}: $_G[group][grouptitle]<!--{if $_G[member]['freeze']}--><span class="xi1">({lang freeze})</span><!--{/if}--></a></div>
<div><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a></div>
</div>

</div>
<!--{elseif !empty($_G['cookie']['loginuser'])}-->
<p>
<strong><a id="loginuser" class="noborder"><!--{echo dhtmlspecialchars($_G['cookie']['loginuser'])}--></a></strong>
<a href="member.php?mod=logging&action=login" onclick="showWindow('login', this.href)">{lang activation}</a>
<a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>
</p>
<!--{elseif !$_G[connectguest]}-->
<!--{template member/login_simple}-->
<!--{else}-->
<div id="um">
<div class="avt y"><!--{avatar(0,small)}--></div>
<p>
<strong class="vwmy qq">{$_G[member][username]}</strong>
<!--{hook/global_usernav_extra1}-->
<span class="pipe">|</span><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>
</p>
<p>
<a href="home.php?mod=spacecp&ac=credit&showcredit=1">{lang credits}: 0</a>
<span class="pipe">|</span>{lang usergroup}: $_G[group][grouptitle]
</p>
</div>
<!--{/if}-->
<!--{if $_G['uid']}-->
<script language=javascript>
var panelstat = 0;
var panelheight;
var panelo;
var davt;
jQ(window).load(
function() {
davt = document.getElementById('d_avt');
panelo = document.getElementById('d_avt_menu');
panelo.style.top=davt.offsetTop+davt.offsetHeight+"px";
panelo.style.left=davt.offsetLeft+davt.offsetWidth-panelo.offsetWidth+"px";
panelo.style.display='block';
panelheight=document.getElementById('d_avt_menu').offsetHeight;
panelo.style.height="0px"
panelo.style.transition="all 0.2s linear";
}
)
function changepanel()
{
if(panelstat==1){
panelo.style.height="0px";
panelo.style.boxShadow="0 0 0px rgba(0,0,0,0.3)"
panelstat=0;
}else{
panelo.style.left=davt.offsetLeft+davt.offsetWidth-panelo.offsetWidth+"px";
panelo.style.top=davt.offsetTop+davt.offsetHeight+"px";
panelo.style.height=panelheight+"px";
panelo.style.boxShadow="0 0 10px rgba(0,0,0,0.3)"
panelstat=1;
}
}
</script>
<!--{/if}-->



样式表的话把下面这些代码写到common.css里面,由于都是附加的样式所以可以直接写,随便写。
.d_upmr1 div {
width: 25%;
}
.d_upmr div {
display: inline-block;
height: 50%;
line-height: 60px;
text-align: center;
}
.d_upmr2 div {
width: 33.3%;
}
.d_upmr div a {
text-decoration: none;
color: white;
text-shadow: 0 0 10px rgba(0,0,0,0.3);
background-color: rgba(255,255,255,0.3);
width: 100%;
height: 100%;
display: block;
transition: 0.2s linear;
}
.d_upmr div a:hover {
color: red;
background-color: rgba(255,255,255,0.8);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
a {transition:0.2s linear;transition-property:color,background-color;}
a:hover {text-decoration:none;color:red;}

.d_upt {background:rgba(255,255,255,0.5);text-align:center;height:60px;line-height:60px;}
.d_upt .pipe {color:transparent;}
.d_upm {border-top:1px solid #CDCDCD;}
.d_upm em {display: none;}
.d_upb {background:rgba(255,255,255,0.5);padding:0 10px;text-align:center;}
.d_upb a:hover {color: red !important;}
.d_upb a {color:black !important;}

#d_avt {border: 2px solid rgba(255,255,255,0.3);font-size: 15px;float: right;width: 48px;height: 48px;text-align: center;line-height: 44px;background: #FFF;box-shadow: 0 0 10px rgba(0,0,0,0.2);cursor: pointer;}
#d_avt a {color:rgba(20,50,255,0.5);height:48px;line-height:48px;width: 48px;text-align:center;display:block;}
#d_avt a:hover {color:red;}
#d_avt_menu {background:rgba(255,255,255,0.3);width:300px;box-shadow:0 0 10px rgba(0,0,0,0.3);overflow:hidden;left:auto;top:0px;position:fixed;display:none;}

感谢各位大大赏脸一读,如果能有大神来帮忙解决的话更好,这个问题实在太奇怪了我从来都没见过,不得已才来这里求助,第一次来这里如果有触犯什么规则或者什么不好的东西的话还请见谅!我会修改的!
...全文
314 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
a596643025 2014-07-16
  • 打赏
  • 举报
回复
<!--{subtemplate common/header_common}-->
	<meta name="application-name" content="$_G['setting']['bbname']" />
	<meta name="msapplication-tooltip" content="$_G['setting']['bbname']" />
	<!--{if $_G['setting']['portalstatus']}--><meta name="msapplication-task" content="name=$_G['setting']['navs'][1]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['portal']) ? 'http://'.$_G['setting']['domain']['app']['portal'] : $_G[siteurl].'portal.php'};icon-uri={$_G[siteurl]}{IMGDIR}/portal.ico" /><!--{/if}-->
	<meta name="msapplication-task" content="name=$_G['setting']['navs'][2]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['forum']) ? 'http://'.$_G['setting']['domain']['app']['forum'] : $_G[siteurl].'forum.php'};icon-uri={$_G[siteurl]}{IMGDIR}/bbs.ico" />
	<!--{if $_G['setting']['groupstatus']}--><meta name="msapplication-task" content="name=$_G['setting']['navs'][3]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['group']) ? 'http://'.$_G['setting']['domain']['app']['group'] : $_G[siteurl].'group.php'};icon-uri={$_G[siteurl]}{IMGDIR}/group.ico" /><!--{/if}-->
	<!--{if helper_access::check_module('feed')}--><meta name="msapplication-task" content="name=$_G['setting']['navs'][4]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['home']) ? 'http://'.$_G['setting']['domain']['app']['home'] : $_G[siteurl].'home.php'};icon-uri={$_G[siteurl]}{IMGDIR}/home.ico" /><!--{/if}-->
	<!--{if $_G['basescript'] == 'forum' && $_G['setting']['archiver']}-->
		<link rel="archives" title="$_G['setting']['bbname']" href="{$_G[siteurl]}archiver/" />
	<!--{/if}-->
	<!--{if !empty($rsshead)}-->$rsshead<!--{/if}-->
	<!--{if widthauto()}-->
		<link rel="stylesheet" id="css_widthauto" type="text/css" href='{$_G['setting']['csspath']}{STYLEID}_widthauto.css?{VERHASH}' />
		<script type="text/javascript">HTMLNODE.className += ' widthauto'</script>
	<!--{/if}-->
	<!--{if $_G['basescript'] == 'forum' || $_G['basescript'] == 'group'}-->
		<script type="text/javascript" src="{$_G[setting][jspath]}forum.js?{VERHASH}"></script>
	<!--{elseif $_G['basescript'] == 'home' || $_G['basescript'] == 'userapp'}-->
		<script type="text/javascript" src="{$_G[setting][jspath]}home.js?{VERHASH}"></script>
	<!--{/if}-->
	<!--{if $_G['basescript'] != 'portal' || $_GET['diy'] == 'yes' && check_diy_perm($topic)}-->
		<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
	<!--{/if}-->
	<!--{if $_GET['diy'] == 'yes' && check_diy_perm($topic)}-->
		<link rel="stylesheet" type="text/css" id="diy_common" href="{$_G['setting']['csspath']}{STYLEID}_css_diy.css?{VERHASH}" />
	<!--{/if}-->
</head>

<body id="nv_{$_G[basescript]}" class="pg_{CURMODULE}{if $_G['basescript'] === 'portal' && CURMODULE === 'list' && !empty($cat)} {$cat['bodycss']}{/if}" onkeydown="if(event.keyCode==27) return false;">
	<div id="append_parent"></div><div id="ajaxwaitid"></div>
	<!--{if $_GET['diy'] == 'yes' && check_diy_perm($topic)}-->
		<!--{template common/header_diy}-->
	<!--{/if}-->
	<!--{if check_diy_perm($topic)}-->
		<!--{template common/header_diynav}-->
	<!--{/if}-->
	<!--{if CURMODULE == 'topic' && $topic && empty($topic['useheader']) && check_diy_perm($topic)}-->
		$diynav
	<!--{/if}-->
	<!--{if empty($topic) || $topic['useheader']}-->
		<!--{if $_G['setting']['mobile']['allowmobile'] && (!$_G['setting']['cacheindexlife'] && !$_G['setting']['cachethreadon'] || $_G['uid']) && ($_GET['diy'] != 'yes' || !$_GET['inajax']) && ($_G['mobile'] != '' && $_G['cookie']['mobile'] == '' && $_GET['mobile'] != 'no')}-->
			<div class="xi1 bm bm_c">
			    {lang your_mobile_browser}<a href="{$_G['siteurl']}forum.php?mobile=yes">{lang go_to_mobile}</a> <span class="xg1">|</span> <a href="$_G['setting']['mobile']['nomobileurl']">{lang to_be_continue}</a>
			</div>
		<!--{/if}-->
		<!--{if $_G['setting']['shortcut'] && $_G['member'][credits] >= $_G['setting']['shortcut']}-->
			<div id="shortcut">
				<span><a href="javascript:;" id="shortcutcloseid" title="{lang close}">{lang close}</a></span>
				{lang shortcut_notice}
				<a href="javascript:;" id="shortcuttip">{lang shortcut_add}</a>

			</div>
			<script type="text/javascript">setTimeout(setShortcut, 2000);</script>
		<!--{/if}-->

		<!--{if !IS_ROBOT}-->
			<!--{if $_G['uid'] && !empty($_G['style']['extstyle'])}-->
				<div id="sslct_menu" class="cl p_pop" style="display: none;">
					<!--{if !$_G[style][defaultextstyle]}--><span class="sslct_btn" onclick="extstyle('')" title="{lang default}"><i></i></span><!--{/if}-->
					<!--{loop $_G['style']['extstyle'] $extstyle}-->
						<span class="sslct_btn" onclick="extstyle('$extstyle[0]')" title="$extstyle[1]"><i style='background:$extstyle[2]'></i></span>
					<!--{/loop}-->
				</div>
			<!--{/if}-->
			<!--{if $_G['uid']}-->
				<ul id="myitem_menu" class="p_pop" style="display: none;">
					<li><a href="forum.php?mod=guide&view=my">{lang mypost}</a></li>
					<li><a href="home.php?mod=space&do=favorite&view=me">{lang favorite}</a></li>
					<li><a href="home.php?mod=space&do=friend">{lang friends}</a></li>
					<!--{hook/global_myitem_extra}-->
				</ul>
			<!--{/if}-->
			<!--{subtemplate common/header_qmenu}-->
		<!--{/if}-->

		<!--{ad/headerbanner/wp a_h}-->
		<div id="hd">
			<!--{eval $mnid = getcurrentnav();}-->
			<div id="nv">
				<div class="wp">
					<div id="d_avt" {if $_G['uid']}onclick="changepanel()"{/if}>
						<!--{if $_G['uid']}-->
						<!--{avatar($_G[uid],small)}-->
						<!--{else}-->
						<a href="javascript:;" onclick="lsSubmit()">sign</a>
						<!--{/if}-->
					</div>
					<a href="javascript:;" id="qmenu" onmouseover="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G[fid]);})">{lang my_nav}</a>
					<ul>
						<!--{loop $_G['setting']['navs'] $nav}-->
							<!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
							<!--{/loop}-->
					</ul>
					<!--subtemplate common/pubsearchform-->
					<!--{hook/global_nav_extra}-->
				</div>
			</div>
			<div class="wp">
				<div class="hdc cl">
					<h2><!--{if !isset($_G['setting']['navlogos'][$mnid])}--><a href="{if $_G['setting']['domain']['app']['default']}http://{$_G['setting']['domain']['app']['default']}/{else}./{/if}" title="$_G['setting']['bbname']">{$_G['style']['boardlogo']}</a><!--{else}-->$_G['setting']['navlogos'][$mnid]<!--{/if}--></h2>
					<!--{template common/header_userstatus}-->
				</div>

				<!--{if !empty($_G['setting']['plugins']['jsmenu'])}-->
					<ul class="p_pop h_pop" id="plugin_menu" style="display: none">
					<!--{loop $_G['setting']['plugins']['jsmenu'] $module}-->
						 <!--{if !$module['adminid'] || ($module['adminid'] && $_G['adminid'] > 0 && $module['adminid'] >= $_G['adminid'])}-->
						 <li>$module[url]</li>
						 <!--{/if}-->
					<!--{/loop}-->
					</ul>
				<!--{/if}-->
				$_G[setting][menunavs]
				<div id="mu" class="cl">
				<!--{if $_G['setting']['subnavs']}-->
					<!--{loop $_G[setting][subnavs] $navid $subnav}-->
						<!--{if $_G['setting']['navsubhover'] || $mnid == $navid}-->
						<ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}">
						$subnav
						</ul>
						<!--{/if}-->
					<!--{/loop}-->
				<!--{/if}-->
				</div>
				<!--{ad/subnavbanner/a_mu}-->

			</div>
		</div>

		<!--{hook/global_header}-->
	<!--{/if}-->

	<div id="wp" class="wp">
这是HEADER.HTM的文件内容,那个用户卡点右上角的头像就会出来了

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧