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

Question

在 Chrome 中，网站 bmr1.com 显示带有放大镜的搜索小部件作为提交按钮的背景图像。为了让提交按钮移动，我添加了 Float:Right 和 Margin-top，以使其到达正确的位置。我还必须添加position:relative，以便按钮位于文本框的顶部。问题与修复 Chrome 的 31px 的 margin-top: 相同，使 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;
  }

Answer 1

试试这个：

.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 重置！这将使浏览器之间布局上的细微差别消失。您将需要覆盖其中一些值，但从长远来看，它可以为您节省很多挫败感！

示例：http://meyerweb.com/eric/tools/css/reset/

Answer 2

我同意之前的评论者的观点，使用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;
  }

您应该使用背景等短代码: url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png') 不重复；使您的代码更短、更清晰

我希望这能解决您的问题。