css - 为什么我的 Google CSE 表单跨浏览器格式如此糟糕？

Question

我在 http://afv.com 上使用 Google CSE结果页面对于 Firefox 和 Safari 来说非常不稳定。这是我看到的:

Chrome(看起来很完美):

Firefox(蓝色按钮中的放大镜消失，文本从输入字段底部掉落):

Safari(输入框太宽，蓝色按钮超出页面边缘):

我一直在研究 Google 给我的样式表，试图覆盖一些样式并标准化输出，但我不明白为什么它在浏览器中如此奇怪。有什么想法吗？我知道使用 CSE 有点麻烦，我不得不将它硬塞进我的布局中，但这些图片显示了一些不正确的布局(或者在 Safari 的情况下，非常不正确)，除了只是一些小的格式问题。

Answer 1

这可能是因为您自己的一些 css 影响了搜索按钮(例如像 bootstrap 或 css reset 这样的库)。如果您尝试使用没有任何其他样式的搜索按钮 - 例如这个:

在此输入代码 http://jsfiddle.net/buQL3/1/show_html/

它应该正确呈现(在 OS X 10.8.5 最新版 Chrome、Firefox 24 和 Safari 6.0.5 中呈现效果很好)。