1

我在网站上有一个输入框和一个按钮，我试图在我的 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;
}
  }
4

1 回答 1

0

试着做这个

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>
于 2013-08-27T11:49:50.613 回答