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之间的空文字引起的。您可以通过删除输入之间的空文本或为font-size:0;元素设置form来解决此问题。

示例：

font-size修复：http://jsfiddle.net/6fTHs/
删除空文字：http://jsfiddle.net/keaukraine/BE7sV/

Answer 2

我知道防止它的唯一方法是在dom中没有隐藏的元素。

如果“我想隐藏的值”部分纯粹用于计算目的，则应使用“数据”属性。

喜欢这个

<div data-custom-value="1001">Visible value </div>

在jQuery中，HTML数据属性可以通过data（）api自动获得。

你可以做到

someElement.data('customValue') to read a value.

和

someElement.data('customValue', newValue) to set a value.

希望我能正确分析你的问题。

Answer 3

最简单的解决方案可能是像

这样的kludge

form { word-spacing: -0.23em }

减少了form内的单词之间的间距，大约是空格的宽度，或者稍微减少。那里没有任何文字，但是IE 7认为有隐藏字段创建的隐形字，用空格分隔。

更强大的解决方案是删除隐藏字段周围和之间的空间，如@keaukraine所示。

IE7输入类型隐藏占用空间

3 个答案: