简体   繁体   中英

Why this search button looks different in google chrome?

In this SITE there is a form at the home page. (Refresh the page again if you are unable to see the form during your first visit.)

the form look ok in fire fox. Ive used customized it as far as I know bit of CSS.

But it does not look ok in Google chrome?

Also how can make those all fields width to 100% for smaller screen? I tried but search button is not going down.

I think I miss somthing related to Position and display ..

This is the media query I am using

#search_btns_h { margin-left: 3% !important; padding: 4.5% 38.5% !important; }
.hotel-day-select { height: 42px; border-radius: 3px; width: 230px; }
@media only screen and (min-width:240px) and (max-width: 1135px)  {
    .hotel-destination { width: 100%; margin-bottom: 9px;}
}
@media only screen and (max-width : 1380px) {
    #search_btns_h {
        margin-left: 21% !important;
        padding: 4.5% 29.5% !important;
    }
}
@media only screen and (max-width : 1373px) {
    #search_btns_h {
        margin-left: 22% !important;
        padding: 4.5% 28.5% !important;
    }
}
@media only screen and (max-width : 1317px) {
    #search_btns_h {
        margin-left: 23%;
        padding: 4.5% 27.5%;
    }
}
@media only screen and (min-width:240px) and (max-width: 1135px) {
    .hotel-date-times > li { width: 100%; margin-bottom: 9px; }
}

How can I adjust the CSS or other code to make the search button and other fields work cross browser compatibility and responsive?

[EDIT]

After clear the cache in G.hrome: http://tinypic.com/r/b4wcj8/9 and same page looks like this in FF: http://tinypic.com/r/2ldhqvq/9

U应该在div上设置宽度。搜索.search-button > div

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM