如何修复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;
}