仅适用于 Chrome 的 CSS？ [关闭]答案

【问题标题】：CSS that only applies to Chrome? [closed]仅适用于 Chrome 的 CSS？ [关闭]
【发布时间】：2011-01-12 23:09:24
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

标签： css internet-explorer firefox google-chrome

【解决方案1】：

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

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

【讨论】：

可能是最好的，尤其是因为在 Chrome 中关闭 JavaScript 并非易事。

【解决方案2】：

尝试将您的 doctype 更改为严格的 - 任何在一个中起作用的东西在所有三个主要浏览器中都应该几乎相同。大多。

【讨论】：

不，很遗憾没有帮助。

【解决方案3】：

仅供参考，a list of all possible browser specific CSS hacks。尽管我不鼓励使用这些技巧，但它可能适合快速解决您的问题。

【讨论】：

【解决方案4】：

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

向你的body标签添加类的小js文件，如.webkit、.chrome等，因此你可以在你的样式表中使用。

【讨论】：

【解决方案5】：

首先让它适合 FF。然后让它看起来适合 FF 和 Chrome。只有在您让它在 FF 和 Chrome 中看起来正确之后，您才应该开始关注它在 IE 中的外观。完成此操作后，开始调整 IE，如有必要，在样式规则之前使用 *，例如：*margin-top:2px; 专门调整 IE7 和 IE6 的上边距。

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

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

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

【讨论】：

+1 表示 * 风格技巧。我从来不知道。
Sweet - 你的第一个要点建议奏效了！虽然我没有将它们设置为相同的高度，但我将 #s 设置为 15px（在它没有定义高度之前）。现在在所有 3 个浏览器中看起来都很棒。 :)
没有。你应该先让它在 IE 中工作。以另一种方式工作要付出更多的努力。你应该先让它在 IE 中运行，然后在其他浏览器中运行。

【解决方案6】：

要使用仅适用于 Webkit 浏览器（Chrome 和 Safari）的 CSS：

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

一个丑陋的 hack，但它可以解决那些令人沮丧的渲染问题。

【讨论】：

【解决方案7】：

几周前我发现了这个技巧，它似乎在所有浏览器中都一样有效。

创建一个包含搜索栏和搜索按钮的图形。通过 CSS 样式使其成为表单的背景。然后调整您的文本输入和提交按钮（可能通过类或 ID）具有 {border:0; background:transparent} 然后简单地调整表单元素的高度和宽度以适应表单背景的布局。我以前使用但无论我如何设计或填充它，都无法完全正确地对齐。如果需要，在您第一次调整表单元素的边距、填充和绝对定位后，此方法几乎可以正常工作（您可能希望在测试期间保持边框可见，以便正确放置）。

我还发现在我的搜索提交按钮上放置一个 {cursor:pointer;} 很方便，有时甚至是其他表单输入，以提供视觉线索，表明这是一个可提交的表单，鼓励人们点击。

【讨论】：