ie中的输入/按钮问题

问题描述：

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

<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中看起来很好。 http://jsfiddle.net/SJLkK/ –

答

尝试像这样

<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一样工作。 – Rooster

我按照user1430562的建议做了旧的方式，现在它可以工作。但是现在占位符并没有消失，因为我点击搜索字段（在所有浏览器中）。对此有何想法？ – Tom

然后他可以为这样的输入设置名称选项 '' 也许这就是为什么它不能正常工作的问题 – rsz

答

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

ie中的输入/按钮问题

相关推荐