Html 交叉浏览器输入元素CSS

我在一个网站上有一个输入框和一个按钮，我正试图在CSS中正确对齐它。最初它在firefox 22.0、safari 5.1.9和chrome 29.0.1547.57mac上看起来不错，但在windows上没有chrome 28.0.1500.95，所以我添加了一些只针对chrome的代码，但是现在它在safari和chrome mac上看起来很奇怪，但在firefox和chrome windows上看起来不错。我该如何解决这个问题

情况就是这样：

CSS代码：

input#image {
            position: relative;
            top: 20px; 
            }

@media screen and (-webkit-min-device-pixel-ratio:0) {
            input#image {
                        position: relative;
                        top: -2px;
                        left: 106px;
                    }
                                                      }
input#box {
          position: relative;
          width: 30px;
          height: 25px;
          top: 25px;
          left: -60px;
          border:none; 
         -webkit-border-radius:5px; 
         -moz-border-radius:5px; 
          border-radius:5px; 
         -webkit-box-shadow:0 0 5px #666 inset; 
         -moz-box-shadow:0 0 5px #666 inset; 
          box-shadow:0 0 5px #666 inset;
          text-align: center;
          }

@media screen and (-webkit-min-device-pixel-ratio:0) {
            input#box {
                      position: relative;
                      width: 30px;
                      height: 25px;
                      top: 30px;
                      left: -60px;
                      border:none; 
                     -webkit-border-radius:5px; 
                     -moz-border-radius:5px; 
                      border-radius:5px; 
                     -webkit-box-shadow:0 0 5px #666 inset; 
                     -moz-box-shadow:0 0 5px #666 inset; 
                      box-shadow:0 0 5px #666 inset;
                      text-align: center;
}
  }

试着做这个

css

html

---

能否提供有关浏览器版本的更多信息？另外，您还没有实现所有特定于供应商的类，例如-ms-和-o-p.s.我对所有这些都很陌生，我想你也需要指定边距和填充，因为它们在每个浏览器上都有不同的预设。我在顶部添加了浏览器版本。这里有一个备忘：我有点困惑，为什么我需要一个列表来正确对齐我的文本框和按钮？

*{
  padding: 0;
  margin: 0;
  outline: 0;
}
#first {
}
#first li {
    list-style-type: none;
    float: left;
}
#first li a {
    background-color: #333333;
    display: block;
    margin: 1px;
    padding: 5px;
    color: #CCCCCC;
    text-decoration: none;
    font-family: Tahoma;
}
#first li a:hover {
    background-color: #666666;
}

<ul id="first">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>