2

我有一个带有隐藏输入字段的表单。在 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;
}
4

3 回答 3

5

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

例子：

  1. font-size修复：http: //jsfiddle.net/6fTHs/
  2. 删除空文本：http: //jsfiddle.net/keaukraine/BE7sV/
于 2012-10-25T08:33:50.037 回答
0

我知道防止它的唯一方法是在 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.

希望我正确地分析了您的问题。

于 2012-10-25T08:25:03.180 回答
0

最简单的解决方法可能是一个像

form { word-spacing: -0.23em }

这将内部单词之间的间距减少form了大约一个空格的宽度，或者更少。那里没有词，但 IE 7 认为有 – 由隐藏字段创建的不可见词，由空格分隔。

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

于 2012-10-25T10:33:35.903 回答