CSS未能改变按钮在Internet Explorer中的外观

Question

我有以下关于当前情况的HTML和CSS：

如您所见，搜索文本框和筛选下拉菜单完美地显示在同一行。但是按钮则在下方。

以下是3个控件的HTML代码：

<table>
<tbody>
    <tr>
        <td>
            <div class="search_result_div">
                <div>
                    <input type="text" style="width:200px;" id='searchButton' value="some text"><span>&nbsp;&nbsp;in&nbsp;&nbsp;</span>
                    <select id="filterDropdown">
                        <option value="all" selected="selected">All Areas</option>
                        <option value="docs">Documents</option>
                    </select>
                    &nbsp;&nbsp;
                    <a onclick="return callSearch();" class="btn" id="searchButton" href="../sys/SearchResults.aspx?q="><span>Search</span></a>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</tbody>
</table>

以下是所有控件的CSS:

.search_result_div a.btn 
    {
      background: url("/images/bg_btn_left.gif")  no-repeat scroll left center transparent;
      display: inline !important;
          float: none;
      font-size: 11px !important;
      line-height: 21px !important;
      margin: 0 !important;
      outline: medium none;
      padding: 3px 0 3px 2px !important;
      text-indent: inherit !important;
    }

 .search_result_div a.btn span 
    {
        background: url("/images/bg_btn.gif") no-repeat scroll right center transparent;
        font-weight: bold !important;
        margin: 0 !important;
        padding: 4px 8px 4px 6px !important;
    }

注意：按钮分为两个图像。

bg_btn_left.gif: bg_btn： 请建议我错在哪里？

谢谢。

- Amin Sayed

---

嘿，现在在你的CSS文件中加入{vertical-align:top;}作为输入。 - Rohit Azad Malik

谢谢。您能告诉我应该把这个放在什么地方吗？ - Amin Sayed

Answer 1

对于内联元素，您可以使用CSS属性vertical-align: middle;来垂直对齐。

- odupont

Answer 2

看这里，它是：http://jsfiddle.net/YUXxf/ 你的代码按照你的意愿工作，但我认为图像的顶部边框更大，这会将图像向下推。

- doniyor

---

它在Firefox中工作，但图像出现在右下方。但在IE中，它完全隐藏了，就像我上传的图像一样。你在IE中正确地看到这个吗？ - Amin Sayed

哦，抱歉，我没有看到你的评论。是的，我在FF中做了这件事。 - doniyor

在IE中也是相同的正确视图。请检查您的图像边框和图像质量本身。它应该与这个示例（fiddle）一样正常工作。 - doniyor

Answer 3

我总是将这个 CSS 文件 css.reset 添加到我的项目中，以确保我不使用浏览器定义的默认 CSS 设置。

- ThdK

---

我不能这样做，因为除了搜索 CSS 归我们团队所有之外，其他团队都拥有 CSS。谢谢。 - Amin Sayed

Answer 4

这是我自己曾经遇到的问题之一。我认为将所有默认边距和填充设置为零可以解决它。看看这是否对你有帮助。

*{margin:0px; padding:0px;}

或者如果它是对齐的问题，请使用

vertical-align: middle;

- Ashwin Singh

Answer 5

嘿，我认为你应该给你的.search_result_div a.btn一些属性

就像这样

input{
vertical-align:top;
}
.search_result_div a.btn{
display:inline-block;
vertical-align:top;
*display:inline; // for ie
}

- Rohit Azad Malik

Answer 6

试试这个：

<style type="text/css">
.search_result_div a.btn 
{
  background: url("bg_btn_left.gif")  no-repeat scroll left top transparent;
  display: inline !important;
      float: none;
  font-size: 11px !important;
  line-height: 21px !important;
  margin: 0 !important;
  outline: medium none;
  padding: 4px 0 3px 2px !important;
  text-indent: inherit !important;
}

.search_result_div a.btn span 
{
    background: url("bg_btn.gif") no-repeat scroll right top transparent;
    vertical-align:top;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 4px 8px 4px 6px !important;
}
</style>

- Anita Sharma