Question

我在网站上有一个输入框和一个按钮，我正在尝试在我的CSS中正确对齐。最初它在firefox 22.0，safari 5.1.9和chrome 29.0.1547.57（mac）上看起来很好但在Windows上没有chrome 28.0.1500.95因此我添加了一些仅针对chrome的代码，但是现在它在safari和chrome（mac）中看起来很奇怪但在windows上使用firefox和chrome很好。我该如何解决这个问题？

这就是：http://i754.photobucket.com/albums/xx182/rache_R/image_zpsd746de67.jpg

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;
}
  }

Answer 1

试试这个

CSS

*{
  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;
}

HTML

<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>

跨浏览器输入元素CSS

1 个答案: