html - 具有神秘顶部偏移的 float 形式

Question

我遇到一个奇怪的问题，表单顶部有大约 1 像素的边距，但我找不到原因。我也无法在 jsbin 中重现这种情况，所以我不确定是什么原因造成的。

这是正在发生的事情的图像:

Chrome 只字未提导致此问题的边距、填充或边框。表单位于列表项内，就像左侧格式正确的链接一样。经过进一步检查，ie 实际上确实说它的顶部有 2px 的“偏移量”，但同样没有迹象表明它存在的原因。

这是问题的一些 HTML(注意，由于之前的内联 block 问题，很多这些东西实际上都在一行上):

<div id="headcontainer">
    <div id="headcenter">
        <header class="left">A header</header>
        <nav>
            <ul class="left">
                Some other list stuff
            </ul>
            <ul class="right">
                <li><a href="">Login</a></li>
                <li>
                    <form id="loginform">
                        <input id="usernamein" type="text">
                        <input id="passwordin" type="password">
                    </form>
                </li>
            </ul>
        </nav>
        <div class="clear"></div>
    </div>
</div>

和一些 CSS(整个文档有一个 html5 css 重置):

label,input{font-family:"Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif}
input{margin:0;padding:0;border:0;display:inline-block}

.left{float:left}
.right{float:right}
.clear{clear:both}

#headcontainer{position:fixed;z-index:100;height:30px;width:100%;top:0;background-color:#1c1c1c;border-bottom:3px solid #cc3f33}
#headcenter{max-width:1000px;margin:0 auto}
#headcenter header{padding:5px;margin:0 10 0 0px}
#headcenter nav{height:30px}
#headcenter ul{list-style:none;height:inherit}
#headcenter li{display:inline-block;height:inherit}
#headcenter li a{height:23px;padding:7px 4px 0;border-bottom:3px solid #cc3f33}

#loginform{display:inline-block;width:200px;height:30px}
#usernamein,#passwordin{width:50%;height:100%}

我实际上能够通过将 input{display:inline-block} 更改为 input{display:block} 来解决这个问题，但这会导致输入不按照我想要的方式对齐。我不明白为什么更改显示甚至会导致此问题。对此的任何解释/修复都会有所帮助(不是像 top:-2px 这样的东西)。

Answer 1

inline-block 观察空格(例如换行 (\n) 等)

因此，除非您的结束标签与开始标签在同一行，否则在使用行内 block 时您将以“随机空白”结束。例如。 ……

有一个“技术”答案，如果您愿意，您可以对其进行研究...