仅适用于Chrome的CSS？

问题描述：

这是我的网站：http://portable-ebook-reader.net 仅适用于Chrome的CSS？

顶部的搜索栏是由两个背景图像。一个是您要在搜索词组中输入的位置，第二个是要搜索的实际按钮。

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

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

谢谢！

答

让它看起来很适合FF。然后让它看起来适合FF和Chrome。只有在FF和Chrome中看起来正确后，才能开始关注自己在IE中的外观。达到此目的后，如果需要，请在样式规则前使用*开始针对IE进行调整，例如：*margin-top:2px;专门调整IE7和IE6的顶部边距。

查看您的代码后，很难确切地说出可能导致问题的原因，而无法在我的系统上测试不同的解决方案。但这里有一些事情你可以尝试在你的styles.css文件，以更改（位于“编年史”文件夹中的“主题”文件夹中），可能解决此问题：

同一高度值同时适用于从#searchsubmit
您#s和#searchsubmit规则集
删除font: 14px "century gothic", Arial, Helvetica, sans-serif;你做到以上后，如果仍然没有合适的两个FF和Chrome看，你#s规则集设置的第一和第二填充值到0（即将8px更改为0px），然后添加margin-top:声明既#s和#searchsubmit并给出两个相同的值，例如margin-top:8px;
，如果你仍然有问题，尝试复制这条线：从您的#s规则集font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;并将其添加到您的#searchsubmit规则设置成它出现在两个规则集中。

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

+1风格的伎俩。我从来不知道这一点。 – 2010-02-04 21:56:36

甜 - 你的第一个要点建议工作！虽然我没有将它们设置为相同的高度，但我将#s设置为15px（在没有定义高度之前）。现在在所有3种浏览器中看起来很棒。 :) – Kane 2010-02-05 21:49:24

不，你应该先在IE中使用它。以另一种方式工作要花费更多的努力。您应该首先在IE中使用它，然后在其他浏览器中使用它。 – rsman 2012-12-25 07:51:23

答

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

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

可能是最好的，尤其是因为在Chrome中关闭JavaScript并非微不足道。 – carl 2010-02-04 07:04:45

答

试着改变你的doctype严格 - 在一个什么工作应该基本能工作同样在所有三个主要的浏览器。大多。

不，不幸的是，没有帮助。 – Kane 2010-02-05 21:33:38

答

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

答

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

小js文件，增加了类像.webkit你的身体标记，.chrome等，你可以在你的样式表这样使用。

答

使用CSS，这将仅适用于WebKit浏览器（Chrome和Safari）：

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

一个丑陋的黑客攻击，但它可以为那些令人沮丧的渲染问题的工作。

答

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

创建一个包含您的搜索栏和搜索按钮的图形。通过CSS样式将其设置为表单的背景。然后调整你的文本输入和提交按钮（可能通过类或ID）有{边界：0;背景：透明}，然后简单地调整表单元素的高度和宽度以适应表单背景的布局。我以前使用<输入类型=“图像”.../>但无论如何设计或填充它，都无法完全对齐。这种方法在第一次调整表单元素的边距，填充和绝对位置（如果需要时可能希望在测试期间可以看到边框以便您可以正确放置它们）时运行正常。

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

仅适用于Chrome的CSS？

相关推荐