Question

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

我的问题是在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

您可以查看navigator.appVersion是否包含单词“Chrome”，并通过javascript将该按钮的相对位置设置为几个像素。

if (navigator.appVersion.indexOf("Chrome/") != -1) {
 // modify button 
}

Answer 3

首先让它适合FF。然后让它适合FF和Chrome。只有在你在FF和Chrome中看到它之后，你才能开始关注它在IE中的外观。完成此操作后，如果需要，在样式规则之前使用*开始调整IE，例如：*margin-top:2px;仅调整IE7和IE6的上边距。

在查看您的代码之后，如果不能在我的系统上测试不同的解决方案，很难确切地说出可能导致问题的原因。但是您可以尝试在styles.css文件中找到一些可以更改的内容（位于'themes'文件夹中的'chronicle'文件夹中），这可能会解决问题：

将相同的高度值应用于#s和#searchsubmit规则集
从font: 14px "century gothic", Arial, Helvetica, sans-serif;

#searchsubmit

执行上述操作后，如果在FF和Chrome中仍然看起来不正确，请将#s规则集的第一个和第二个填充值设置为0（即更改{ {1}}至8px），然后向0px和margin-top:添加#s声明，并提供相同的值，例如#searchsubmit
如果您仍然遇到问题，请尝试从margin-top:8px;规则集中复制此行：font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;并将其添加到您的#s规则集中，以便它在两者中都显示规则集。

有很多不同的可能性可能导致问题，这就是为什么你可能想要尝试上述黑客之一，如果你无法找出问题的根源。

Answer 4

尝试将您的文档类型更改为严格 - 无论哪种工作都应该在所有三种主要浏览器中大致相同。大多。

Answer 5

仅作为参考，a list of all possible browser specific CSS hacks。虽然我不鼓励使用这些黑客，但它可能适合您的问题快速解决。

Answer 6

几个星期前我发现了这个技巧，它似乎在所有浏览器中都有相同的功能。

创建一个包含搜索栏和搜索按钮的图形。通过CSS样式使其成为表单的背景。然后调整文本输入和提交按钮（可能通过类或ID）以{border：0; background：transparent}然后简单地调整表单元素的高度和宽度以适合表单背景的布局。我以前用过＆lt; input type =“image”... /＆gt;但无论我的风格或填充方式如何，都无法让对齐得恰到好处。在您第一次调整表单元素的边距，填充和绝对定位（如果需要）之后，此方法可以正常工作（您可能希望在测试期间保持边框可见，以便您可以正确放置它）。

我还发现将{cursor：pointer;}放在我的搜索提交按钮上，有时甚至是其他表单输入，以便给出一个可提交表格的视觉线索，并鼓励人们点击。

Answer 7

查看http://rafael.adm.br/css_browser_selector/

小js文件，它将类添加到你的body标签，如.webkit，.chrome等，你可以在样式表中使用它们。

仅适用于Chrome的CSS？

7 个答案: