Search IE9浮动问题：我的搜索小部件提交按钮的右键和边距顶部

在Chrome浏览器中，网站bmr1.com显示带有放大镜的搜索小部件，作为提交按钮的背景图像。为了让提交按钮移动，我添加了Float:Right和margintop，以使其进入正确的位置。我还必须添加position:relative，这样按钮就会位于文本框的顶部。问题是相同的边缘顶部：修复Chrome的31px，使IE9的提交按钮太高，位置不合适

bmr1.com

<div id="search-2" class="widget widget_search"><h4 class="widgettitle"><cufon class="cufon cufon-canvas" alt="Search" style="width: 64px; height: 22px; "><canvas width="80" height="28" style="width: 80px; height: 28px; top: -4px; left: -1px; "></canvas><cufontext>Search</cufontext></cufon></h4><form role="search" method="get" id="searchform" action="http://bmr1.com/">
    <label class="screen-reader-text" for="s">Search for:</label>
    <input type="text" value="" name="s" id="s" placeholder="" widdit="on" autocomplete="off">
    <input type="submit" id="searchsubmit" value="">
    </form><div id="predictad_div" class="predictad"></div></div>


#sidebar1 { position: relative; }
#search-2.widget.widget_search {z-index:0; background-color: #363636; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; color:#363636; max-width:231px;}
#search-2.widget.widget_search #s{width:94%; padding: 5px;position:relative;}
#search-2.widget.widget_search h4  {font-size:140%; background-color: #84c4e7; padding: 5px 10px 5px 10px; border: 1px solid #fff; margin-bottom:10px;}
.widget_search .screen-reader-text {margin-bottom:-20px;float:right;}
#mp_cart_widget-3.widget.mp_cart_widget { background-color: #cdcdcd; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; max-width:231px;}
#mp_cart_widget-3.widget.mp_cart_widget h4  { font-size:140%; background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/greysliver.png'); background-repeat: repeat-x; padding: 5px 10px 6px 10px; margin-bottom:10px; color:#fff; }
#mp_categories_widget-3.widget.mp_categories_widget { background-color: #363636; margin-right:15px; margin-bottom:20px; padding: 10px 10px 10px 10px; color:#fff; max-width:231px;}
#mp_categories_widget-3.widget.mp_categories_widget h4 { font-size:140%; background-color: #84c4e7; padding: 5px 0px 5px 10px; border: 1px solid #fff; margin-bottom:10px; color:#363636;}
#mp_categories_widget-3.widget.mp_categories_widget a {text-decoration:none; color:#fff; margin-left: 30px; }
#sidebar ul {font-size:18px;  font-weight:bold; }
ul#mp_category_list {padding-right:10px;font-size:18px; }
ul#mp_category_list .children {text-align:left;list-style: none;margin-left:10px; font-size:15px !important;}
.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
padding: 8px 16px;
margin-top:-31px;
position:relative;
  }

bmr1.com
搜寻
搜索：
#边栏1{位置：相对；}
#search-2.widget.widget_search{z-index:0；背景色：#363636；右侧边距：15px；底部边距：25px；填充：10px 10px 10px 10px；颜色：#363636；最大宽度：231px；}
#search-2.widget.widget_search{s{宽度：94%；填充：5px；位置：相对；}
#search-2.widget.widget_search h4{字体大小：140%；背景色：84c4e7；填充：5px 10px 5px 10px；边框：1px实心#fff；边距底部：10px；}
.widget_search.screen reader文本{页边距底部：-20px；float:right；}
#mp#u cart_widget-3.widget.mp_cart_widget{背景色：cdcdcdcd；右边距：15px；底部距：25px；填充：10px 10px 10px 10px；最大宽度：231px；}
#mp_cart_widget-3.widget.mp_cart_widget h4{字体大小：140%；背景图像：url（'http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/greysliver.png'）；背景重复：重复-x；填充：5px 10px 6px 10px；页边距底部：10px；颜色：#fff；}
#mp#u categories_widget-3.widget.mp_categories_widget{背景色：#363636；右边空白：15px；底部空白：20px；填充：10px 10px 10px 10px；颜色：#fff；最大宽度：231px；}
#mp#u categories_widget-3.widget.mp_categories_widget h4{字体大小：140%；背景颜色：84c4e7；填充：5px 0px 5px 10px；边框：1px实心#fff；边距底部：10px；颜色：#363636；}
#mp_categories_widget-3.widget.mp_categories_widget a{文本装饰：无；颜色：#fff；左边距：30px；}
#侧边栏ul{字体大小：18px；字体重量：粗体；}
ul#mp_分类列表{右边填充：10px；字体大小：18px；}
ul#mp_category_list.children{文本对齐：左；列表样式：无；左边距：10px；字体大小：15px！重要；}
.widget_搜索#搜索提交{
背景图像：url（'http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
背景色：透明；
边界：无；
背景重复：无重复；
颜色：透明；
高度：28px；
宽度：30px；
光标：指针；
浮动：对；
填充：8px 16px；
利润上限：-31px；
位置：相对位置；
}

试试这个：

.widget_search #searchsubmit {
background-image: url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color: transparent;
border: none;
background-repeat: no-repeat;
height: 28px;
width: 30px;
cursor: pointer;
position: absolute;
z-index: 10;
top: 3px;
right: 0;
}

#search-2 form {position: relative;}

另外，我强烈建议使用css重置！这将消除浏览器之间布局上的任何细微差异。您将需要覆盖其中一些值，但从长远来看，这会为您节省很多挫折

---

例如：

我同意前面的评论，使用reset.css！不同的浏览器对所有内容都有不同的默认边距、填充等值，这使您的网页在每个浏览器中看起来都不同

要解决此问题，您应该执行以下操作。 首先，为文本输入字段指定一个固定高度：

#search-2.widget.widget_search #s{width:94%;height:20px; padding: 5px;position:relative;}

改变是我为元素应用了20像素的高度

然后将以下内容应用于“提交”按钮：

.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
bottom:31px;
position:relative;
  }

您应该使用诸如background:url（'http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png")不重复;；使您的代码更短、更干净

我希望这能解决你的问题