logo标签列表

只针对Chrome浏览器的CSS？

cssinternet-explorerfirefoxgoogle-chrome
10

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

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

我的问题是在Chrome中，搜索按钮图像高了2像素。但在IE和FF中看起来完美。如果我修改CSS（margin-top: 2px），那么Chrome看起来很好，但IE和FF会出现问题。

有任何想法吗？我已经搜寻了几小时，但没有任何进展。

谢谢！

7个回答
34

使用只应用于Webkit浏览器（Chrome和Safari）的CSS：

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

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

3
您可以检查 navigator.appVersion 是否包含单词“Chrome”，并通过JavaScript将该按钮的相对定位向下调整几个像素。
if (navigator.appVersion.indexOf("Chrome/") != -1) {
 // modify button 
}
可能是最好的，特别是因为在Chrome中关闭JavaScript并不容易。 - carl
2
首先，要先将其在FF上看起来正确。然后再将其在FF和Chrome上看起来正确。只有在你已经在FF和Chrome上看起来正确后，才应该开始关注它在IE上的外观。当你达到这个目标后，如有必要，在你的样式规则之前使用* 来调整IE，例如：*margin-top: 2px; 可以专门为IE7和IE6调整顶部边距。
查看您的代码后，很难确定问题的具体原因，因为无法在我的系统上测试不同的解决方案。但是在styles.css文件中（位于'themes'文件夹中的'chronicle'文件夹中），您可以尝试更改以下内容来解决问题：
  • 将相同的高度值应用于#s 和#searchsubmit规则集
  • 从#searchsubmit中删除font: 14px "century gothic", Arial, Helvetica, sans-serif;
  • 完成上述操作后，如果仍然在FF和Chrome中显示不正确，请将#s规则集的第一个和第二个填充值设置为0（即将8px 更改为 0px ），然后在#s和#searchsubmit中添加margin-top:声明，并为两个元素设置相同的值，例如margin-top:8px;。
  • 如果您还遇到问题，请尝试将此行复制到#searchsubmit规则集中： font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;。
由于可能导致问题的不同可能性很多，如果无法确定问题源，您可以尝试上述其中一种 hack。
1
+1 对于 * 样式技巧。我从来不知道那个。 - Adrian Petrescu
太好了 - 你的第一个建议点起作用了！虽然我没有将它们设置为相同的高度，但我将#s设置为15像素（之前没有定义高度）。现在在所有三个浏览器中看起来都很棒。 :) - Kane
1
不，你应该先让它在IE中工作。这样做起来更费力。你应该先让它在IE中工作，然后再在其他浏览器中测试。 - Raj
1

尝试将文档类型更改为严格模式 - 在一个浏览器中有效的大部分内容应该在所有三个主要浏览器中都能够起作用。但并不是完全一致。

很抱歉，那并没有帮助到。 - Kane
1
1

我几周前发现了这个技巧，它在所有浏览器中的效果都相同。

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

我还发现在我的搜索提交按钮上放置{cursor:pointer;}非常方便，有时甚至在其他表单输入上也是如此，以给出视觉提示，表明这是可提交的表单，鼓励人们点击。

-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接