IE7輸入類型隱藏佔用空間

我有一個隱藏輸入字段的表單。在IE7中，佈局得到了改變。提交按鈕位於下一行。如果你選擇兩者之間的空間，似乎每個隱藏的輸入都是空白的。我能對此做什麼？這裏是jsfiddle。IE7輸入類型隱藏佔用空間

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; 
}

來源

2012-10-25 testing

提示：而不是向隱藏的輸入添加類使用CSS選擇器'input [type = hidden]' – stackunderflow

這是否在IE7中工作？ – testing

我相信，因爲它是CSS1選擇器 – stackunderflow

它是由input.hidden-inputs之間的空文本引起的。您可以通過刪除輸入之間的空文本或通過爲form元素設置font-size:0;來修復它。

實例：

font-size修正：http://jsfiddle.net/6fTHs/
卸下空文本：http://jsfiddle.net/keaukraine/BE7sV/

來源

2012-10-25 08:33:50 keaukraine

我所知道的唯一方法，以防止它是沒有DOM中隱藏的元素。

如果「我要隱藏的值」部分純粹用於計算目的，則應使用「數據」屬性。

喜歡這張

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

在jQuery中，HTML數據屬性是經由數據（）API自動可用。

你可以做

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

和

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

希望我正確的分析你的問題。

來源

2012-10-25 08:25:03

輸入字段用於CMS中的插件。我認爲它只接受POST值。但看起來你是對的。不要使用它是唯一的方法。我認爲IE7用戶將不得不接受這種設計。 – testing

最簡單的解決方法是可能像

form { word-spacing: -0.23em }

一組裝機，其減少了單詞之間的間距在內由一個空間的寬度，或少一點。這裏沒有任何單詞，但IE 7認爲有 - 隱藏字段創建的隱形單詞，用空格分隔。

更健壯的解決方案是去除隱藏字段周圍和空間之間的空間，正如@keaukraine所建議的。

來源

2012-10-25 10:33:35

IE7輸入類型隱藏佔用空間

回答

相關問題