HTML DIV百分比宽度奇奇怪怪的间距产生了？
16lz
2021-01-22
最近做站的时候要做个用户卡，顺着自己做的DEMO做，本来DEMO好好的结果放到测试站点里面变成这样...
DEMO运行的时候好好的啊，下面这图不是DEMO本体，是直接从站点上面扒下来的HTML代码然后在源文件里面加上CSS的效果
说白了是个Discuz论坛拉，但是为何会出现这种莫名其妙的间距问题，我去百度了很多也没找到。好像是显示模式引发的，但是在DEMO里面用同样的显示模式一点问题也没有。我之所以这样讲是因为当display模式设置成flex以后就没有了这些间距。
源码文件的话我发一下，用以替换discuz论坛里面的header_userstatus.htm还有header.htm在回复里面发吧，长度过了。
样式表的话把下面这些代码写到common.css里面，由于都是附加的样式所以可以直接写，随便写。
感谢各位大大赏脸一读，如果能有大神来帮忙解决的话更好，这个问题实在太奇怪了我从来都没见过,不得已才来这里求助，第一次来这里如果有触犯什么规则或者什么不好的东西的话还请见谅！我会修改的！
这是HEADER.HTM的文件内容，那个用户卡点右上角的头像就会出来了
DEMO运行的时候好好的啊，下面这图不是DEMO本体，是直接从站点上面扒下来的HTML代码然后在源文件里面加上CSS的效果
说白了是个Discuz论坛拉，但是为何会出现这种莫名其妙的间距问题，我去百度了很多也没找到。好像是显示模式引发的，但是在DEMO里面用同样的显示模式一点问题也没有。我之所以这样讲是因为当display模式设置成flex以后就没有了这些间距。
源码文件的话我发一下，用以替换discuz论坛里面的header_userstatus.htm还有header.htm在回复里面发吧，长度过了。
<!--{if$_G['uid']}-->
<divid="um">
<divclass="avty"style="display:none;"><ahref="home.php?mod=space&uid=$_G[uid]"><!--{avatar($_G[uid],small)}--></a></div>
<divid="d_avt_menu">
<divclass="d_upt">
<strongclass="vwmy{if$_G['setting']['connect']['allow']&&$_G[member][conisbind]}qq{/if}"><ahref="home.php?mod=space&uid=$_G[uid]"target="_blank"title="{langvisit_my_space}"class="showmenu"onmouseover="showMenu({'ctrlid':'myitem'});">{$_G[member][username]}</a></strong>
<!--{if$_G['group']['allowinvisible']}-->
<spanid="loginstatus">
<aid="loginstatusid"href="member.php?mod=switchstatus"title="{langlogin_switch_invisible_mode}"onclick="ajaxget(this.href,'loginstatus');returnfalse;"class="xi2"></a>
</span>
<!--{/if}-->
<div>
<!--{hook/global_usernav_extra1}-->
</div>
</div>
<divclass="d_upm">
<!--{hook/global_usernav_extra4}-->
<divclass="d_upmrd_upmr1">
<!--{if$_G['uid']}-->
<div><ahref="home.php?mod=space&do=pm"id="pm_ntc"style="background-repeat:no-repeat;background-position:050%;"><emclass="prompt_news{ifempty($_G[member][newpm])}_0{/if}"></em>{langpm_center}</a></div>
<div><ahref="home.php?mod=follow&do=follower"><emclass="prompt_follower{ifempty($_G[member][newprompt_num][follower])}_0{/if}"></em><!--{langnotice_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><ahref="home.php?mod=follow"><emclass="prompt_concern"></em><!--{langnotice_interactive_follow}-->($_G[member][newprompt_num][follow])</a></div>
<!--{/if}-->
<!--{if$_G[member][newprompt]}-->
<!--{loop$_G['member']['category_num']$key$val}-->
<div><ahref="home.php?mod=space&do=notice&view=$key"><emclass="notice_$key"></em><!--{echolang('template','notice_'.$key)}-->(<spanclass="rq">$val</span>)</a></div>
<!--{/loop}-->
<!--{/if}-->
<!--{ifempty($_G['cookie']['ignore_notice'])}-->
<divclass="ignore_noticeli"><ahref="javascript:;"onclick="setcookie('ignore_notice',1);hideMenu('myprompt_menu')"title="{langtemporarily_to_remind}"><emclass="ignore_notice"></em></a></div>
<!--{/if}-->
<!--{/if}-->
<!--{if$_G['setting']['taskon']&&!empty($_G['cookie']['taskdoing_'.$_G['uid']])}--><div><ahref="home.php?mod=task&item=doing"id="task_ntc"class="new">{langtask_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><ahref="portal.php?mod=portalcp"><!--{if$_G['setting']['portalstatus']}-->{lang portal_manage}<!--{else}-->{langportal_block_manage}<!--{/if}--></a></div>
<!--{/if}-->
</div>
<divclass="d_upmrd_upmr2">
<div><ahref="javascript:;"id="myitem"class="showmenu"onmouseover="showMenu({'ctrlid':'myitem'});">{langmyitem}</a></div>
<div><ahref="home.php?mod=spacecp">{langsetup}</a></div>
<!--{if$_G['uid']&&$_G['group']['radminid']>1}-->
<div>
<ahref="forum.php?mod=modcp&fid=$_G[fid]"target="_blank">{langforum_manager}</a>
</div>
<!--{/if}-->
<!--{if$_G['uid']&&getstatus($_G['member']['allowadmincp'],1)}-->
<div>
<ahref="admin.php"target="_blank">{langadmincp}</a>
</div>
<!--{/if}-->
</div>
<!--{hook/global_usernav_extra2}-->
</div>
<divclass="d_upb">
<!--{hook/global_usernav_extra3}-->
<div><ahref="home.php?mod=spacecp&ac=credit&showcredit=1"id="extcreditmenu"{if!$_G[setting][bbclosed]}onmouseover="delayShow(this,showCreditmenu);"class="showmenu"{/if}>{langcredits}:$_G[member][credits]</a></div>
<div><ahref="home.php?mod=spacecp&ac=usergroup"id="g_upmine"class="showmenu"onmouseover="delayShow(this,showUpgradeinfo)">{langusergroup}:$_G[group][grouptitle]<!--{if$_G[member]['freeze']}--><spanclass="xi1">({langfreeze})</span><!--{/if}--></a></div>
<div><ahref="member.php?mod=logging&action=logout&formhash={FORMHASH}">{langlogout}</a></div>
</div>
</div>
<!--{elseif!empty($_G['cookie']['loginuser'])}-->
<p>
<strong><aid="loginuser"class="noborder"><!--{echodhtmlspecialchars($_G['cookie']['loginuser'])}--></a></strong>
<ahref="member.php?mod=logging&action=login"onclick="showWindow('login',this.href)">{langactivation}</a>
<ahref="member.php?mod=logging&action=logout&formhash={FORMHASH}">{langlogout}</a>
</p>
<!--{elseif!$_G[connectguest]}-->
<!--{templatemember/login_simple}-->
<!--{else}-->
<divid="um">
<divclass="avty"><!--{avatar(0,small)}--></div>
<p>
<strongclass="vwmyqq">{$_G[member][username]}</strong>
<!--{hook/global_usernav_extra1}-->
<spanclass="pipe">|</span><ahref="member.php?mod=logging&action=logout&formhash={FORMHASH}">{langlogout}</a>
</p>
<p>
<ahref="home.php?mod=spacecp&ac=credit&showcredit=1">{langcredits}:0</a>
<spanclass="pipe">|</span>{langusergroup}:$_G[group][grouptitle]
</p>
</div>
<!--{/if}-->
<!--{if$_G['uid']}-->
<scriptlanguage=javascript>
varpanelstat=0;
varpanelheight;
varpanelo;
vardavt;
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="all0.2slinear";
}
)
functionchangepanel()
{
if(panelstat==1){
panelo.style.height="0px";
panelo.style.boxShadow="000pxrgba(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="0010pxrgba(0,0,0,0.3)"
panelstat=1;
}
}
</script>
<!--{/if}-->
样式表的话把下面这些代码写到common.css里面，由于都是附加的样式所以可以直接写，随便写。
.d_upmr1div{
width:25%;
}
.d_upmrdiv{
display:inline-block;
height:50%;
line-height:60px;
text-align:center;
}
.d_upmr2div{
width:33.3%;
}
.d_upmrdiva{
text-decoration:none;
color:white;
text-shadow:0010pxrgba(0,0,0,0.3);
background-color:rgba(255,255,255,0.3);
width:100%;
height:100%;
display:block;
transition:0.2slinear;
}
.d_upmrdiva:hover{
color:red;
background-color:rgba(255,255,255,0.8);
box-shadow:0010pxrgba(0,0,0,0.3);
}
a{transition:0.2slinear;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:1pxsolid#CDCDCD;}
.d_upmem{display:none;}
.d_upb{background:rgba(255,255,255,0.5);padding:010px;text-align:center;}
.d_upba:hover{color: red!important;}
.d_upba{color:black!important;}
#d_avt{border:2pxsolidrgba(255,255,255,0.3);font-size:15px;float:right;width:48px;height:48px;text-align:center;line-height:44px;background:#FFF;box-shadow:0010pxrgba(0,0,0,0.2);cursor:pointer;}
#d_avta{color:rgba(20,50,255,0.5);height:48px;line-height:48px;width: 48px;text-align:center;display:block;}
#d_avta:hover{color:red;}
#d_avt_menu{background:rgba(255,255,255,0.3);width:300px;box-shadow:0010pxrgba(0,0,0,0.3);overflow:hidden;left:auto;top:0px;position:fixed;display:none;}
感谢各位大大赏脸一读，如果能有大神来帮忙解决的话更好，这个问题实在太奇怪了我从来都没见过,不得已才来这里求助，第一次来这里如果有触犯什么规则或者什么不好的东西的话还请见谅！我会修改的！
1 个解决方案
#1
<!--{subtemplatecommon/header_common}-->
<metaname="application-name"content="$_G['setting']['bbname']"/>
<metaname="msapplication-tooltip"content="$_G['setting']['bbname']"/>
<!--{if$_G['setting']['portalstatus']}--><metaname="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}-->
<metaname="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']}--><metaname="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}-->
<!--{ifhelper_access::check_module('feed')}--><metaname="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']}-->
<linkrel="archives"title="$_G['setting']['bbname']"href="{$_G[siteurl]}archiver/"/>
<!--{/if}-->
<!--{if!empty($rsshead)}-->$rsshead<!--{/if}-->
<!--{ifwidthauto()}-->
<linkrel="stylesheet"id="css_widthauto"type="text/css"href='{$_G['setting']['csspath']}{STYLEID}_widthauto.css?{VERHASH}'/>
<scripttype="text/javascript">HTMLNODE.className+='widthauto'</script>
<!--{/if}-->
<!--{if$_G['basescript']=='forum'||$_G['basescript']=='group'}-->
<scripttype="text/javascript"src="{$_G[setting][jspath]}forum.js?{VERHASH}"></script>
<!--{elseif$_G['basescript']=='home'||$_G['basescript']=='userapp'}-->
<scripttype="text/javascript"src="{$_G[setting][jspath]}home.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if$_G['basescript']!='portal'||$_GET['diy']=='yes'&&check_diy_perm($topic)}-->
<scripttype="text/javascript"src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if$_GET['diy']=='yes'&&check_diy_perm($topic)}-->
<linkrel="stylesheet"type="text/css"id="diy_common"href="{$_G['setting']['csspath']}{STYLEID}_css_diy.css?{VERHASH}"/>
<!--{/if}-->
</head>
<bodyid="nv_{$_G[basescript]}"class="pg_{CURMODULE}{if$_G['basescript']==='portal'&&CURMODULE==='list'&&!empty($cat)}{$cat['bodycss']}{/if}"onkeydown="if(event.keyCode==27)returnfalse;">
<divid="append_parent"></div><divid="ajaxwaitid"></div>
<!--{if$_GET['diy']=='yes'&&check_diy_perm($topic)}-->
<!--{templatecommon/header_diy}-->
<!--{/if}-->
<!--{ifcheck_diy_perm($topic)}-->
<!--{templatecommon/header_diynav}-->
<!--{/if}-->
<!--{ifCURMODULE=='topic'&&$topic&&empty($topic['useheader'])&&check_diy_perm($topic)}-->
$diynav
<!--{/if}-->
<!--{ifempty($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')}-->
<divclass="xi1bmbm_c">
{langyour_mobile_browser}<ahref="{$_G['siteurl']}forum.php?mobile=yes">{langgo_to_mobile}</a><spanclass="xg1">|</span><ahref="$_G['setting']['mobile']['nomobileurl']">{langto_be_continue}</a>
</div>
<!--{/if}-->
<!--{if$_G['setting']['shortcut']&&$_G['member'][credits]>=$_G['setting']['shortcut']}-->
<divid="shortcut">
<span><ahref="javascript:;"id="shortcutcloseid"title="{langclose}">{langclose}</a></span>
{langshortcut_notice}
<ahref="javascript:;"id="shortcuttip">{langshortcut_add}</a>
</div>
<scripttype="text/javascript">setTimeout(setShortcut,2000);</script>
<!--{/if}-->
<!--{if!IS_ROBOT}-->
<!--{if$_G['uid']&&!empty($_G['style']['extstyle'])}-->
<divid="sslct_menu"class="clp_pop"style="display:none;">
<!--{if!$_G[style][defaultextstyle]}--><spanclass="sslct_btn"onclick="extstyle('')"title="{langdefault}"><i></i></span><!--{/if}-->
<!--{loop$_G['style']['extstyle']$extstyle}-->
<spanclass="sslct_btn"onclick="extstyle('$extstyle[0]')"title="$extstyle[1]"><istyle='background:$extstyle[2]'></i></span>
<!--{/loop}-->
</div>
<!--{/if}-->
<!--{if$_G['uid']}-->
<ulid="myitem_menu"class="p_pop"style="display:none;">
<li><ahref="forum.php?mod=guide&view=my">{langmypost}</a></li>
<li><ahref="home.php?mod=space&do=favorite&view=me">{langfavorite}</a></li>
<li><ahref="home.php?mod=space&do=friend">{langfriends}</a></li>
<!--{hook/global_myitem_extra}-->
</ul>
<!--{/if}-->
<!--{subtemplatecommon/header_qmenu}-->
<!--{/if}-->
<!--{ad/headerbanner/wpa_h}-->
<divid="hd">
<!--{eval$mnid=getcurrentnav();}-->
<divid="nv">
<divclass="wp">
<divid="d_avt"{if$_G['uid']}onclick="changepanel()"{/if}>
<!--{if$_G['uid']}-->
<!--{avatar($_G[uid],small)}-->
<!--{else}-->
<ahref="javascript:;"onclick="lsSubmit()">sign</a>
<!--{/if}-->
</div>
<ahref="javascript:;"id="qmenu"onmouseover="delayShow(this,function(){showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G[fid]);})">{langmy_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>
<!--subtemplatecommon/pubsearchform-->
<!--{hook/global_nav_extra}-->
</div>
</div>
<divclass="wp">
<divclass="hdccl">
<h2><!--{if!isset($_G['setting']['navlogos'][$mnid])}--><ahref="{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>
<!--{templatecommon/header_userstatus}-->
</div>
<!--{if!empty($_G['setting']['plugins']['jsmenu'])}-->
<ulclass="p_poph_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]
<divid="mu"class="cl">
<!--{if$_G['setting']['subnavs']}-->
<!--{loop$_G[setting][subnavs]$navid$subnav}-->
<!--{if$_G['setting']['navsubhover']||$mnid==$navid}-->
<ulclass="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}-->
<divid="wp"class="wp">
这是HEADER.HTM的文件内容，那个用户卡点右上角的头像就会出来了
更多相关文章
- JavaScript作为内联块去间距的强大黑客
- 有没有办法强制Chrome在OSX上以演示模式打开？
- 使活动选项卡在模式下不起作用
- php调停者模式(mediator pattern)
- thinkphp关闭调试模式后URL大小写问题
- 关于一个单例模式的问题，这样写为什么返回的是DB实例，而不是一个PD
- PHP CLI模式开发
- php 23种设计模型 - 抽象工厂模式
- 随手小记：PHP-FPM模式下PHP最大执行时间、Pragma和post-check