jquery - 为什么这个搜索按钮在谷歌浏览器中看起来不一样？

Question

在此SITE主页上有一个表格。 (如果您在第一次访问时看不到表格，请再次刷新页面。)

表格在 Fire Fox 中看起来不错。据我对 CSS 的了解，我使用了自定义它。

但它在谷歌浏览器中看起来不正常？

另外，对于较小的屏幕，如何将所有字段的宽度设置为 100%？我试过了，但搜索按钮没有关闭。

我想我错过了与 Position 和 display 相关的东西..

这是我正在使用的媒体查询

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

如何调整 CSS 或其他代码以使搜索按钮和其他字段具有跨浏览器兼容性和响应能力？

[编辑]

清除G.hrome中的缓存后:http://tinypic.com/r/b4wcj8/9同一页面在 FF 中看起来像这样:http://tinypic.com/r/2ldhqvq/9

Answer 1

你应该在你的 div .search-button > div 上设置一个宽度