css height的一个莫名其妙的有关问题-HTML教程-爱易网页

css height的一个莫名其妙的有关问题

日期：2014-05-17　浏览次数：20736 次

请教高手css height的一个莫名其妙的问题
要修改个页面，遇到个问题，我样式不是专长，郁闷得饭都吃不下，代码经剥离已经最简化，如下：

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
     <style type="text/css">
        
html,body {    margin:0; font:12px Arial,Helvetica,sans-serif,宋体;  color:#333; background:#474747;}
/*=== html,body标签，以及MOZ的模块兼容 ===*/
body>table,body>div {clear:both;} /* M0Z */
        #Top
        {
            width: 980px;
            padding: 101px 10px 0px;
            margin: 0px auto 0px;
            position: relative;
        }
        #Top-menu li
        {
            float: left;
        }
        #Top-menu li a
        {
            float: left;
            text-decoration: none;
        }
        #login
        {
            height: 25px;
            margin-top: 0px; *margin-top:-101px;/*ie6/7 hack*/}/*二级导航栏*/
        #Top-under
        {
            width: 980px;
            margin: 0px auto;
        }
        #Top-under-l
        {
            float: left;
        }
        #Top-under-l li
        {
            float: left;
        }
        #Top-under-l li a
        {
            float: left;
        }
        .fleft
        {
            float: left;
        }
        .fright
        {
            float: right;
        }
        .clearer
        {
            clear: both;
        }
    </style>
</head>
<body>

    <div id="Top">
        <ul id="Top-menu">
            <li id="index" class="m-c"><a href="/"><span>首页</span></a></li>
        </ul>
        <div class="clearer">
        </div>
        <div id="login" >
            <div class="fleft">
                xtextx</div>
            <div class="fright" id="usrInfo">
                <a onclick="this.innerText='valid'" style="cursor:hand;">[登录]</a>
            </div>
        </div>
        <div id="Top-under">
            <ul id="Top-under-l">
                <li><span><a href="#">精彩推荐</a></span></li>
            </ul>
            <div class="clearer">
            </div>
        </div>
    </div>

</body>
</html>

很简单的目标，点登陆，“登录”变成“Valid”，郁闷的事情来了，点击过后#login整体上移了；把#login{..中的height:25px;删除之后，则正常，但是这里我必须要这个25px啊！究竟问题出在了哪里啊？？？

------解决方案--------------------
#login
{
height: 25px;
margin-top: 0px; *margin-top:-101px;/*ie6/7 hack*/}/*二级导航栏*/
换成
#login
{
margin-top: 0px; *margin-top:-101px;/*ie6/7 hack*/}/*二级导航栏*/
height: 25px;
}

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

css height的一个莫名其妙的有关问题

相关资料更多>

推荐阅读更多>