ie中的输入/按钮问题答案

【问题标题】：input/button issue in ieie中的输入/按钮问题
【发布时间】：2012-08-23 05:46:43
【问题描述】：

由于某种原因，我的搜索框在 ie 中没有正确显示。搜索框根本不可见，按钮位于不应该出现的角落。这是我的 HTML：

<div class="searchbox">
<form action="?" method="get">
    <input type="text" placeholder="Search Modern Spaces" />
    <button type="submit" value="submit" />
 </form>
</div><!--searchBoxOne-->

还有 CSS：

.searchbox input {
color: #b0b0b0;
width: 430px;
height: 28px;
margin-top: 32px;
padding: 10px 5px;
float: left;    
font-size: 20px;
border: 0;
border-radius: 4px 4px 4px 4px; 
box-shadow: inset 0 0 6px #7b7a7a;     
}

.searchbox button{
overflow: visible;
position: relative;
margin: 39px 0 0 -40px;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 36px;
background:url(../images/srch_button.png) no-repeat;

}

关于如何解决这个问题的任何想法？感谢您的帮助。

【问题讨论】：

什么版本的IE？减去占位符（在任何版本的 IE 中都不起作用），它在 IE9 中看起来不错。 jsfiddle.net/SJLkK

标签： html css internet-explorer cross-browser

【解决方案1】：

这样试试

<div class="searchbox">
<form action="?" method="get">
<input type="text" placeholder="Search Modern Spaces" />
<button>Submit</button>
</form>
</div><!--searchBoxOne-->

或者用旧方法代替<button type="submit" value="submit" />插入这个

<input type='submit' value='submit' />

【讨论】：

是的，即不正确的 html 可能会令人不快。按钮标签文本内容的工作方式类似于 textareas。
我按照 user1430562 的建议按照旧方式进行操作，现在可以在 ie 中使用。但是现在占位符并没有消失，因为我点击了搜索字段（在所有浏览器中）。对此有什么想法吗？
然后他可以像这样为输入设置名称选项<input type="text" name="searchstring" placeholder="Search Modern Spaces" /> 也许这就是它无法正常工作的问题
@TulkinTg：IE 不支持占位符。
@TulkinTg 那是占位符的作用，当你点击输入框时，占位符的文字消失了，如果你点击其他地方，它必须再次出现！

【解决方案2】：

box-shadow 仅支持 IE9+。如果您使用的是 IE box-shadow 将被忽略，因此文本框不可见，因为它的边框为 0。

【讨论】：