Html 在 IE 中填充文本输入......可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/607198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
padding a text input in IE... possible?
提问by Jiaaro
I have a text input with a search buton absolute positioned over it... to make space for the button I used some padding to keep the text from going under the button, which is fine, it works in firefox, but not IE.
我有一个文本输入，上面有一个绝对定位的搜索按钮......为按钮腾出空间我使用了一些填充来防止文本进入按钮下方，这很好，它在 Firefox 中有效，但在 IE 中无效。
In fact... It doesn't seem like padding on text inputs works at all in IE.
事实上......在 IE 中，文本输入的填充似乎根本不起作用。
They have the following code
他们有以下代码
<style type="text/css">
#mainPageSearch input {
width: 162px;
padding: 2px 20px 2px 2px;
margin: 0;
font-size: 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
border-color:#C6C6C6 #C6C6C6 #E3E3E3;
border-style:solid;
border-width:1px;
color:#666666;
}
#mainPageSearch {
margin-bottom: 10px;
position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
display: block;
position: absolute;
top:0px;
right: -2px;
text-indent: -2000em;
height: 22px;
width: 22px;
background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>
<form id="mainPageSearch" action="">
<input type="text"/>
<a id="mainPageSearchButton" href="#">Search</a>
</form>
Is what I'm trying to do possible or should I just suck it up and deal with the text going under the search button?
我正在尝试做的事情是可能的，还是我应该把它吸干并处理搜索按钮下的文本？
I know I could make a search box with a transparent background/border and draw the styling using a containing div... but that isn't really an option because of how many places I've have to change it on the site.
我知道我可以制作一个带有透明背景/边框的搜索框，并使用包含的 div 绘制样式......但这并不是一个真正的选择，因为我必须在网站上更改它的多少地方。
Maybe I'll make a new class for this text input that makes it transparent and assign the normal text input style to the containing div? What do you think?
也许我会为这个文本输入创建一个新类，使其透明并将普通文本输入样式分配给包含的 div？你怎么认为？
edit: sorry I should have included the doctype... here it is:
编辑：对不起，我应该包括文档类型......这里是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
also, The problems I'm having are in IE 7
另外，我遇到的问题是在 IE 7 中
回答by chris
try using line-height
尝试使用行高
回答by Armen Kesablyan
I had this issue also i solved it by adding the following line
我也遇到了这个问题，我通过添加以下行来解决它
input
{
overflow:visible;
padding:5px;
}
hope this helps? Let me know.
希望这可以帮助？让我知道。
回答by Olli
Try border-rightinstead of padding-right. This worked for me.
尝试border-right代替padding-right. 这对我有用。
回答by David D
Make your input transparent and place styles inside a container div:
使您的输入透明并将样式放置在容器 div 中：
http://jsfiddle.net/LRWWH/211/
http://jsfiddle.net/LRWWH/211/
HTML
HTML
<div class="input-container">
<input type="text" class="input-transparent" name="fullname">
</div>
CSS
CSS
.input-container {
background:red;
overflow:hidden;
height: 26px;
margin-top:3px;
padding:6px 10px 0px;
width: 200px;
}
.input-transparent {
background-color:transparent;
border:none;
overflow:hidden;
color:#FFFFF;
width: 200px;
outline:none;
}
回答by user2169658
There is a css only fix for it
有一个 css 只修复它
div.search input[type="text"] {
width: 110px;
margin: 0;
background-position: 0px -7px;
text-indent:0;
padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
border-left: 25px solid transparent;
background-position-x: -16px;
padding-left: 0px;
line-height: 2.5em;
}
Thanks Muhammad Atif Chughtai
感谢穆罕默德·阿蒂夫·楚泰
回答by Filip Dupanovi?
You'll have to use float: left/right on '#mainPageSearch input' before you can apply padding/margin.
在应用填充/边距之前，您必须在“#mainPageSearch 输入”上使用 float: left/right。
回答by Shane N
I experienced a similar problem - IE was padding the input field, but not making it bigger, thus pushing the text down inside of it. I fixed it by setting the height of the input as well. Try that.
我遇到了类似的问题 - IE 正在填充输入字段，但没有使其变大，从而将文本向下推入其中。我也通过设置输入的高度来修复它。试试那个。
回答by Nick Allen
I have the following working in IE7. What version are you targeting?
我在 IE7 中有以下工作。你的目标是什么版本？
<style type="text/css">
input#test {
padding: 10px;
}
</style>
<input type="text" id="test" />
回答by German Latorre
What about declaring DOCTYPE?
声明 DOCTYPE 怎么样？
By adding <!DOCTYPE html>padding works grand for me in IE8. Take the following code as an example:
通过<!DOCTYPE html>在 IE8 中添加填充对我来说非常有用。以下面的代码为例：
<!DOCTYPE html>
<html>
<head>
<style>
#myInput {
padding: 10px;
}
</style>
</head>
<body>
<input id="myInput" value="Some text here!" />
</body>
</html>
