!DOCTYPE为何总是让HTML的body多出10个像素

我想使body 100%；我的样式是
html
{
height:100%;
}
body 
{
margin:0px;
padding:0;
height:100%;
width:100%
}界面代码是，我用的是MVC4，IE9。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/Content/css?v=5m6Uxnj2Ff9q5EFtwu0UP39xNfPfL6QNlGjvYO-hRe01" rel="stylesheet" type="text/css" />
    <link href="/Content/themes/base/css?v=4yeATuVEt6OSO9UUFy-BKLuvQR0HMWcI9IQiyM-bjZ01" rel="stylesheet" type="text/css" />
    <script src="/Scripts/js?v=7LOc9p1s9tWcs-NlAA9NbVKVWiZXRsPQu5ceXrqQuCE1"></script>
</head>
<body>
    <header>
        <div class="float_right">
           <section id="login">
                     <ul>
      <li><a data-dialog-title="登录" href="/Account/Login" id="loginLink">登录</a> </li>
      <li><a data-dialog-title="注册" href="/Account/Register" id="registerLink">注册</a></li>
     </ul>            </section>
        </div>
    </header>
    <h2>Index</h2><img id="testcodeImg" src="/Home/GetValidateCode?tid=110100050" />
Index!!!!
</body>
</html>
但是出现的界面里面始终有多出10个像素左右的高度，导致设置 height 100%的时候产生滚动条。。去掉
<!DOCTYPE html>才正常，如何在<!DOCTYPE html>有的情况下，让样式正常？

解决方案 »

  1.   

    正确的方法是
    html,body{padding:0;margin:0;border:0}  <!DOCTYPE html>规范中，html标签是最外层的容器，不是body
      

  2.   

    但是这样body并没有100%啊？设置了100%，还是会产生滚动条；多出来的空白部分始终在上方。我需要的是我的内容顶在上方，而不是空白
      

  3.   


    html,body 
    {
    margin:0px;
    padding:0;
    border:0;
    height:100%;
    width:100%
    }
    *{margin:0px;
    padding:0;
    border:0;
    }
      

  4.   

    *{margin:0px;
    padding:0;
    border:0;
    }这个会影响很多元素的默认样式，有没有别的方式？关键是为什么会多出像素，我明明都设置了充满100%，多出像素没有道理啊，真的说不过去。
      

  5.   

    100%不是随便写的， 你在一个 有边框的对象里面写就是错误的的，实际宽度就成了100%html的宽度+边框宽度。
    这样就对撑到浏览器外面了