如何使用 Internet Explorer 的 css 参数修复提交按钮？

Question

我的网站在 chrome nad firefox 上运行良好，但显然在 Internet Explorer 11 上它没有正确显示提交按钮。

有人可以检查一下是什么问题

这是按钮的 style.css 代码：

#searchsubmit { 
 font-family: Frutiger, Lato;
 background: url('images/search.png');
 cursor: pointer;
 width: 30px;
 height: 30px;
 border: 0px;
 float:right; 
 margin-top:5px;
}

.searchform input, .searchform input#s, placeholder { 
 font-family: Frutiger, Lato;
 background: #4D6B87;
 height: 30px;
 border: 0px;
 color: #EAEAEA;
 font-size: 14px;
 padding-left: 5px; 
}

所有 style.css 都可以在这里找到：www.virmodrosti.com/wp-content/themes/virmodrosti/style.css

Answer 1

第一个解决方案：

我找到了一种方法，但您必须使用 Internet Explorer 的条件注释，这将解决您的问题，请这样做：

<!--[if IE]>
<style>
    #searchsubmit {
         position:absolute;
         right:20px;
    }
</style>
<![endif]-->

---

第二种解决方案：

我不确定这个，因为我不再使用 Internet Explorer，所以我无法测试它，但也许你只需添加：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

它只能在 Internet Explorer 11 上模拟为边缘，但您必须尝试。

Answer 2

试试这个代码：

.searchform#searchform input, .searchform#searchform button {
    display: inline-block;
    float: none;
    vertical-align: middle;
    margin: 0;
}
.searchform#searchform input {
    width: calc( 100% - 40px );
    margin-right: -2px;
}
.searchform#searchform button {
    width: 30px;
    margin-left: -2px;
}