html - IE7输入类型隐藏占用空间

Question

我有一个带有隐藏输入字段的表单。在 IE7 中，布局发生了变化。提交按钮位于下一行。如果您选择之间的空格，则每个隐藏的输入似乎都是空白。对此我能做什么呢？这是jsfiddle .

HTML:

<div id="column1">
    <div id="searchform">
        <form action="/index.php?id=17" method="post" name="searchform01">
            <input type="text" name="tx_indexedsearch[sword]" value="Suchbegriff" class="searchform-input" onfocus="clearText(this)" onblur="clearText(this)" />
            <input type="hidden" name="tx_indexedsearch[_sections]" class="hidden-inputs" value="0" />
            <input type="hidden" name="tx_indexedsearch[_freeIndexUid]" id="tx_indexedsearch_freeIndexUid" class="hidden-inputs" value="_" />
            <input type="hidden" name="tx_indexedsearch[pointer]" id="tx_indexedsearch_pointer" class="hidden-inputs" value="0" />
            <input type="hidden" name="tx_indexedsearch[ext]" class="hidden-inputs" value="0" />
            <input type="hidden" name="tx_indexedsearch[type]" class="hidden-inputs" value="1" />
            <input type="hidden" name="tx_indexedsearch[defOp]" class="hidden-inputs" value="0" />
            <input type="hidden" name="tx_indexedsearch[media]" class="hidden-inputs" value="-1" />
            <input type="hidden" name="tx_indexedsearch[order]" class="hidden-inputs" value="rank_flag" />
            <input type="hidden" name="tx_indexedsearch[group]" class="hidden-inputs" value="flat" />
            <input type="hidden" name="tx_indexedsearch[lang]" class="hidden-inputs" value="-1" />
            <input type="hidden" name="tx_indexedsearch[desc]" class="hidden-inputs" value="0" />
            <input type="hidden" name="tx_indexedsearch[results]" class="hidden-inputs" value="10" />
            <input type="submit" id="search-button" value="Suchen" />
        </form>
    </div>
</div>

CSS:

.hidden-inputs {
    display: none;
    visibility: hidden;
    border: 0;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    clear: left;
    margin-left: inherit;
    overflow: hidden;
}

#column1 {
    width: 245px;
    float: left;
    background-color: #FFFFFF;
}

Answer 1

这是由 input.hidden-inputs 之间的空文本引起的。您可以通过删除输入之间的空文本或为 form 元素设置 font-size:0; 来修复此问题。

示例:

1. 字体大小修复:http://jsfiddle.net/6fTHs/
2. 删除空文本:http://jsfiddle.net/keaukraine/BE7sV/