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

Text overlapping issue only in Internet Explorer

本文关键字：文本 重叠 问题 存在 Internet Explorer 仅在      更新时间：2023-09-26

我有一个带有文本输入的搜索框，按钮输入与搜索框内的按钮并排。在InternetExplorer上，当我们键入一个长字符串时，文本会与按钮重叠。这与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>

CSS：

.searchBox_div {
  display: inline-block;
  verticle-align: middle;
  background: #FFF url(/themes/default/images/glyphicons-halflings-black.png) no-repeat 5px 6px;
  position: relative;
}
.searchBox_div: before {
content: "";
display: block;
position: absolute;
background: url(/themes/default/images/glyphicons-halflings-black.png) no-repeat center center;
width: 24px;
left: 4px;
top: 50 % ;
margin-top: -12px;
z - index: 1;
overflow: hidden;
}
.searchBox {
height: 30px;
width: 400px;
padding-left: 30px;
font-size: 20px;
}
.searchBox_div::-ms-clear {
width: 0;
height: 0;
display: none;
}
#overlay_search {
position: absolute;
background: url(/themes/default/images/glyphicons-halflings-black.png) no-repeat center center;
width: 24px;
height: 24px;
right: -4px;
top: 50 % ;
background-position: -48px 5px;
margin - top: -11px;
z - index: 1;
display: inline-block;
overflow: hidden;
}
#overlay_cancel {
background-image: url("/themes/default/images/glyphicons-halflings-black.png");
background-position: -313px 5px;
background-repeat: no-repeat;
display: inline-block;
height: 24px;
line-height: 14px;
margin-top: 0;
vertical-align: text-top;
padding: 2px 25px 0 0;
width: 14px;
}

一旦我在stackoverflow上得到足够的分数，我就会发布截图。我正在从Dojo Javascript中尝试类似的东西，它对我有部分作用。但看起来并不像我想要的那么好。

  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版本上也有这个问题，下面的解决方案帮了我很多忙，仍然对我有帮助：

检查浏览器兼容性：http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

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

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

或者你可以做一些类似的事情

[if IE]
.searchBox_div {
  display: inline-block; // u change anything here
  verticle-align: middle;// u change anything here
  background: #FFF url(/themes/default/images/glyphicons-halflings-black.png) no-repeat 5px 6px;// u change anything here
  position: relative;// u change anything here
}
[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;
}
相关文章：