IE padding-right問題bg圖像輸入

我面臨着一個IE瀏覽器的問題（所有版本直到IE 10）。 IssueIE padding-right問題bg圖像輸入

輸入框中的文本重疊其背景圖像。我不能把這個圖像放在父div中作爲一個動態輸入框，並且有很多其他功能。我不能增加文本框的寬度超過100像素，價值約50個字符。

請幫忙。

CSS

.some { 
background:url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png) no-repeat right center; 
padding:1px 15px 1px 1px; 
border:1px solid #ccc; 
width:100px; 
color:red; 
overflow:hidden;}

HTML

<input type="text" class="some" value="I am a messy input box" />

來源

2014-02-28 Era

如果將填充增加到30，會出現什麼情況？'padding：1px 30px 1px 1px; '......這是否會移動您的圖像？ – LGSon

@PellePanna：不，它只是增加了輸入框的寬度，文字與圖像重疊。其實我不能增加文本框的寬度超過100像素，價值約50個字符。 thx – Era

根據sanjeev的答案，增加右填充。它會工作很酷。 –

添加padding試試這個演示用IE8：http://jsfiddle.net/74u4w/2/

如果一切正常，只是邊框添加到圖像，你將有一個修復

.some { 
    background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png); 
    background-position: 105px -6px; 
    background-repeat: no-repeat; 
    padding: 1px 1px 1px 1px; 
    border: 1px solid #ccc; 
    border-right: 25px solid transparent; 
    width: 100px; 
    color: red; 
    overflow: hidden; 
}

如果沒有，那麼最後的手段是一個小型的JavaScript，你輸入後追加一個img /格。（可以動態完成）

設置了絕對位置後，不會影響流量。這個css示例顯示了它的外觀：

.some { 
    padding: 1px 1px 1px 1px; 
    border: 1px solid #ccc; 
    width: 80px;     /* narrowed to fit img */ 
    color: red; 
    overflow: hidden; 
} 
.someimg { 
    background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    position: absolute; 
    overflow: hidden; 
    left: ?px;   /* needs to be calculated based on each input */ 
    top: ?px;    /* needs to be calculated based on each input */ 
    width: 20px; 
    height: 20px; 
}

來源

2014-02-28 07:28:28 LGSon

不幸運..... ......（ – Era

嘗試我的更新... – LGSon

儘可能完美無缺，因爲沒有其他方法可以在IE中修復它..而且很好它適合你 – LGSon

對我來說工作以同樣的方式，即，瀏覽器，Mozilla

只是增加填充右=的寬度圖像+一些額外的空間;

我做

 .some { 
     background:url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png) no-repeat right center; 
     padding:1px 25px 1px 1px; 
     border:1px solid #ccc; 
     width:100px; 
     color:red; 
     overflow:hidden; 
     }

在所有的瀏覽器上面的工作對我罰款

編輯：這一個使用不同的方法，一種錯覺

 .some { 
    padding:0px 25px 0px 0px; 
    width:100px; 
    color:red; 
    overflow:hidden; 
      border:0px; 
    } 


    .holder{ 
    position:relative; 
    float:left; 
    border:1px solid #ccc; 
    } 
    .holder div{ 
    background:url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png) no-repeat right center; 
    position:absolute; 
    height:100%; 
    width:25px; 
    top:0px; 
    right:0px; 
    }

有這種添加在您的html

<div class='holder'> 
    <input type="text" class="some" value="I am a messy input box" /> 
    <div>&nbsp;</div> 
    </div>

以及在上面的代碼中，我使用的其他分區的背景圖像，這是位置aboslute，相對的容器，將永遠被放置在右側

希望這有助於你出去

來源

2014-02-28 06:49:21 sanjeev

你檢查了這在IE瀏覽器？它根本不工作。 – Era

是的，它在ie 9中工作正常，即10 – sanjeev

奇怪，仍然不適合我。 – Era

減少input場width和右

DEMO FIDDLE

來源

2014-02-28 06:56:41 Girish

檢查IE @Girish，它仍然與圖像重疊。 – Era

@Era它不會在IE瀏覽器的工作，你可以添加'span'或其他元素的搜索圖標... – Girish

@Era，你爲什麼要這樣做呢？，如果你會得到完成，那麼你也無法附加「搜索圖標」上的任何事件...... – Girish

IE padding-right問題bg圖像輸入

回答

相關問題