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 に答える