当前位置： 文江博客话题详情

在 IE 中填充文本输入...可能吗？

发布于 2024-07-14 06:57:25 字数 1485 浏览 9 评论 0原文

我有一个文本输入，搜索按钮绝对位于其上方...为了为按钮腾出空间，我使用了一些填充来防止文本进入按钮下方，这很好，它可以在 Firefox 中使用，但不能在 IE 中使用。

事实上...在 IE 中，文本输入的填充似乎根本不起作用。

他们有以下代码


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

我想要做的事情是可能的还是我应该把它吸收并处理搜索按钮下的文本？

我知道我可以制作一个具有透明背景/边框的搜索框，并使用包含的 div 绘制样式...但这并不是真正的选择，因为我必须在网站上的很多地方更改它。

也许我会为此文本输入创建一个新类，使其透明并将普通文本输入样式分配给包含的 div？ 你怎么认为？

编辑：抱歉，我应该包含文档类型...这里是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

另外，我遇​​到的问题是在 IE 7 中

原文

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.

In fact... It doesn't seem like padding on text inputs works at all in 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.

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?

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

梦一生花开无言 2024-07-21 06:57:25

尝试使用行高

try using line-height

回复 原文
滴情不沾 2024-07-21 06:57:25

我也遇到了这个问题，我通过添加以下行解决了它

input 
{
    overflow:visible;
    padding:5px;
}

希望这有帮助吗？ 让我知道。

I had this issue also i solved it by adding the following line

input 
{
    overflow:visible;
    padding:5px;
}

hope this helps? Let me know.

回复 原文
此生挚爱伱 2024-07-21 06:57:25

尝试使用 border-right 而不是 padding-right。 这对我有用。

Try border-right instead of padding-right. This worked for me.

回复 原文
糖果控 2024-07-21 06:57:25

使您的输入透明并将样式放置在容器 div 内：

http://jsfiddle.net/LRWWH/211/< /a>

HTML

 <div class="input-container">
 <input type="text" class="input-transparent" name="fullname"> 
 </div>

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

Make your input transparent and place styles inside a container div:

http://jsfiddle.net/LRWWH/211/

HTML

 <div class="input-container">
 <input type="text" class="input-transparent" name="fullname"> 
 </div>

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;
  }
回复 原文
晨与橙与城 2024-07-21 06:57:25

有一个仅针对 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;
}

谢谢
穆罕默德·阿提夫·楚格泰

There is a css only fix for it

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

回复 原文
南城旧梦 2024-07-21 06:57:25

您必须在“#mainPageSearch 输入”上使用 float: left/right，然后才能应用填充/边距。

You'll have to use float: left/right on '#mainPageSearch input' before you can apply padding/margin.

回复 原文
沧笙踏歌 2024-07-21 06:57:25

我遇到了类似的问题 - IE 正在填充输入字段，但没有使其变大，从而将文本向下推入其中。 我还通过设置输入的高度来修复它。 尝试一下。

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.

回复 原文
并安 2024-07-21 06:57:25

我在 IE7 中工作如下。 您的目标版本是什么？

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


<input type="text" id="test" />

I have the following working in IE7. What version are you targeting?

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


<input type="text" id="test" />
回复 原文
甜味拾荒者 2024-07-21 06:57:25

声明 DOCTYPE 怎么样？

通过添加 填充在 IE8 中对我来说非常有用。 以下面的代码为例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>

What about declaring DOCTYPE?

By adding <!DOCTYPE html> padding works grand for me in IE8. Take the following code as an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>
回复 原文
~没有更多了~

关于作者

违心°

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文