仅适用于Chrome的CSS？

Question

这是我的网站:http: //portable-ebook-reader.net

顶部的搜索栏由两个背景图像组成.一个用于输入搜索短语的位置,第二个是要搜索的实际按钮.

我的问题是在Chrome中,搜索按钮图像的亮度为2px太高.但它在IE和FF中看起来很完美.如果我修改CSS(margin-top:2px),Chrome看起来不错,但IE和FF搞砸了.

有任何想法吗？我一直在寻找几个小时没有运气.

谢谢!

Answer 1

要使用仅适用于Webkit浏览器的CSS(Chrome和Safari):

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #searchsubmit { height: 20px; }
    #s { margin-top: 5px; } 
}

一个丑陋的黑客,但它可以解决那些令人沮丧的渲染问题.

Answer 2

首先找到适合 FF 的地方。然后让它看起来适合 FF 和 Chrome。只有当你让它在 FF 和 Chrome 中看起来正确之后，你才应该开始关心它在 IE 中的外观。实现此目的后，然后开始针对 IE 进行调整，如有必要，请*在样式规则之前使用，例如：*margin-top:2px;专门调整 IE7 和 IE6 的上边距。

查看您的代码后，如果无法在我的系统上测试不同的解决方案，则很难准确说出可能导致问题的原因。但您可以尝试在 styles.css 文件（位于“主题”文件夹中的“编年史”文件夹中）中更改以下一些内容，这可能会解决该问题：

• 将相同的高度值应用于您的#s规则#searchsubmit集
• font: 14px "century gothic", Arial, Helvetica, sans-serif;从......中去除#searchsubmit
• 执行上述操作后，如果在 FF 和 Chrome 中看起来仍然不正确，请将#s规则集的第一个和第二个填充值设置为0（即更改8px为0px），然后margin-top:向两者添加声明#s，并#searchsubmit给出两者相同的值，例如margin-top:8px;
• 如果您仍然遇到问题，请尝试font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;从您的#s规则集中复制此行：并将其添加到您的#searchsubmit规则集中，以便它出现在两个规则集中。

导致问题的可能性有很多，这就是为什么如果您无法找出问题的根源，您可能需要尝试上述方法之一。