CSS位置问题

Question

Evening,

HTML:

<input type="text" class="search" value="Search"><input type="button" class="searchimg" value="Search" />

CSS:

input.search {
    font-size: 1em;
    color: #383838;
    margin: 7px 0 0 7px;
    padding: 3px;
    border: 1px solid #969696!important;
    background: #FEFEFE!important;
    height: 16px;
    width: 250px;
} 

input.searchimg { 
   text-indent: -99999px;
   width: 24px; 
   height: 24px; 
   display: inline;
   background: url(../images/search.jpg) 0 0 no-repeat;
   border: 0px;
   margin: 7px 0 0 0;
}

(search.jpg dimentions: 24x24px, 1px border is part of image, not CSS! http://img267.imageshack.us/img267/6779/searchr.png )

Top version shows how it's supposed to render, the bottom picture is showing how it is actually rendering, in all broswers. It is 2px higher than it's supposed to be. I'm not really sure why it's doing this.

Thanks.

Answer 1

尝试删除行margin: 7px 0 0 7px;

Answer 2

Try vertical-align:top on input.search { ... } this should work because your input is affected by (previous?) inline styles.

For the future: it's easier to operate on elements styled with display:inline-block and it's well supported in browsers (IE 7 needs an small hack, IE 6 should be dead already).