Javascript 仅在Internet Explorer中存在文本重叠问题

我有搜索框，文本输入和按钮输入并排，搜索框内有按钮。在Internet Explorer上，当我们键入长字符串时，文本与按钮重叠。这在firefox和chrome等其他浏览器上可以完美地工作，并且不会出现文本重叠

HTML代码：

<td style="width: 44%" align="right">
<div class="searchBox_div">
    <input type="text" id="search" name="search" style="background-color: white; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-left-colors: none; -moz-border-bottom-colors: none; border-color: black -moz-use-text-color black black; border-image: none; padding: 2px 15px 0 0; border-width: 1px;">
    <input type="button" id="overlay_search" title="Perform Search" style="-moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; padding: 5px 6px; border-width: 0px 0px 0px 0px;">
</div>
</td>

一旦我在stackoverflow上得到足够的分数，我就会发布截图。我正在从DojoJavaScript中尝试类似的东西，这在一定程度上对我有用。但是看起来没有我想要的那么好

  if(dojo.isIE){
        on(dom.byId("search"), "focus", function () {
                style.set("search", "backgroundColor", "rgb(253,216,87)");
                style.set("searchBox_div", "border-width", "1px");
                style.set("searchBox_div", "backgroundColor", "rgb(253,216,87)");
                style.set("searchBox_div", "background-position-x", "15px");
        }); 
  }

---

请帮助我在internet explorer中解决此问题。

如果你只在IE上遇到问题，你可以只针对不同版本的IE使用CSS，我在不同版本的IE上遇到过此问题，下面的解决方案对我帮助很大，而且仍然对我有帮助：

查看浏览器兼容性：

例如，告诉我您在哪个版本的IE中遇到问题： 你可以这样做来创建一个css文件并在css中写入

[if IE]
    <link rel="stylesheet" type="text/css" href="your_css_that_will_affect_only_ie.css" />
[endif]

---

我看不出浏览器与您的代码有什么不同。这节课我能给你什么建议

#overlay_search{
    right: -22px; // take it out completely from input field
}

---

如果这不能帮助制作一个屏幕截图，你现在的样子和你想要的样子。我将完全按照您的意愿进行修复。

我通过从stratch添加CSS和HTML并删除绝对定位和其他不必要的CSS解决了这个问题

<div>
    <input type="text" class="tftextinput" name="search" id="search" size="21" style="border:gray solid;border-width: 1px 0px 1px 1px;"/>
    <input type="submit" value="" id="overlay_search" class="tfbutton" style="border: 1px gray solid;height:22px;border-width: 1px 1px 1px 0px;"/>
 </div>    

.tftextinput{
    margin: 0;
    padding: 5px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
            width: 94px;
            height:10px;
            border:none;
}
.tfbutton {
    margin: 0px;
            height:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
            background: url(/themes/default/images/glyphicons-halflings-black.png) #ffffff no-repeat center center;
            background-position: -47px 3px;
            border:none;
            width:20px;
}

.TFT输出{
保证金：0；
填充：5px15px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
宽度：94px；
高度：10px；
边界：无；
}
.TF按钮{
边际：0px；
高度：20px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
大纲：无；
光标：指针；
文本对齐：居中；
文字装饰：无；
背景：url（/themes/default/images/glyphicons halflings black.png）#ffffff无重复中心；
背景位置：-47px 3px；
边界：无；
宽度：20px；
}

我尝试上传预览图像，但需要获得声誉才能这样做，我认为您的实际css之间没有空格或破折号：

inline-blockdisplay:inline-block在这里：是的，你是对的。但是有谁能指导我制定条件CSS吗？这并不适用于IE的所有版本。是的，我已经在我的代码中使用了IE的条件CSS。我需要输入来定义准确的CSS，它不会在任何浏览器中中断。@rocktopus哪个版本的IE u都有问题？是的，这个问题出现在具有上述代码的所有IE版本中。
#overlay_search{
    right: -22px; // take it out completely from input field
}

<div>
    <input type="text" class="tftextinput" name="search" id="search" size="21" style="border:gray solid;border-width: 1px 0px 1px 1px;"/>
    <input type="submit" value="" id="overlay_search" class="tfbutton" style="border: 1px gray solid;height:22px;border-width: 1px 1px 1px 0px;"/>
 </div>    

.tftextinput{
    margin: 0;
    padding: 5px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
            width: 94px;
            height:10px;
            border:none;
}
.tfbutton {
    margin: 0px;
            height:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
            background: url(/themes/default/images/glyphicons-halflings-black.png) #ffffff no-repeat center center;
            background-position: -47px 3px;
            border:none;
            width:20px;
}