仅适用于 Chrome 的 CSS？

CSS that only applies to Chrome?

提问by Kane

This is my site: http://portable-ebook-reader.net

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

The search bar at the top is made up of two background images. One is for where you'd type in the search phrase, the second is the actual button to search.

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

My problem is that in Chrome the search button image is 2px too HIGH. But it looks perfect in IE and FF. And if I modify the CSS (margin-top: 2px) then Chrome looks good but IE and FF are messed up.

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

Any ideas? I've been searching for hours without any luck.

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

Thanks!

谢谢！

采纳答案by brookmarker

Get it looking right for FF first. Then get it looking right for both FF and Chrome. Only after you have it looking right in FF and Chrome, should you start concerning yourself with how it looks in IE. After you achieve this, then start adjusting for IE, if necessary, using *before your style rules, example: *margin-top:2px;adjusts the top margin for IE7 and IE6 exclusively.

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

After looking at your code, it's difficult to say exactly what may be causing the problem without being able to test different solutions on my system. But here are some things you can try to change in your styles.css file (located in your 'chronicle' folder within your 'themes' folder) that may correct the issue:

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

• apply the same height value to both your #sand #searchsubmitrule-sets
• remove font: 14px "century gothic", Arial, Helvetica, sans-serif;from #searchsubmit
• after you do the above, if it still doesn't look right in both FF and Chrome, set the first and second padding values for your #srule-set to 0(i.e. change 8pxto 0px) and then add a margin-top:declaration to both #sand #searchsubmitand give both the same value, for example margin-top:8px;
• if you're still having issues, try copying this line: font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;from your #srule-set and add it to your #searchsubmitrule-set so that it appears in both rule-sets.

• 对您的#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规则集中，以便它出现在两个规则集中。

There's so many different possibilities that could be causing the problem, which is why you may want to try one of the aforementioned hacks if you can't figure out the source of the problem.

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

回答by reflexiv

To use CSS that will only apply to Webkit browsers (Chrome and Safari):

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

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

An ugly hack but it can work for those frustrating rendering problems.

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

回答by Sampson

You could check to see if navigator.appVersioncontains the word "Chrome" and set the relative positioning of that button down a couple pixels via javascript.

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

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

回答by Scottie Mac

I found this trick a couple of weeks ago and it seems to work identically in all browsers.

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

Create a single graphic that contains both your search bar and search button. Make it the background of your form through CSS styling. Then adjust both your text input and submit button (likely through classes or IDs) to have {border:0; background:transparent} and then simply adjust the height and width of the form elements to fit the layout of your form background. I formerly used <input type="image" ... /> but could never get the alignment quite right no matter how I styled or padded it. This method works right pretty much after your first adjustment of the form elements' margin, padding and absolute positioning if need by (you might want to leave the borders visible during testing just so you can place it properly).

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

I also find it handy to put a {cursor:pointer;} over my search submit button and sometimes even other form inputs to give a visual clue that this is a submittable form and people are encouraged to click.

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

回答by James

Try changing your doctype to strict - whatever works in one should mostly work the same in all three major browsers. Mostly.

尝试将您的 doctype 更改为严格 - 任何一种在所有三种主要浏览器中都有效。大多。

回答by davydepauw

Just as a reference, a list of all possible browser specific CSS hacks. Although I discourage the use of those hacks, it may suit a quick fix for your problem.

作为参考，所有可能的浏览器特定 CSS hacks 的列表。尽管我不鼓励使用这些 hack，但它可能适合快速解决您的问题。

回答by Thomas Maas

Have a look at http://rafael.adm.br/css_browser_selector/

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

little js file that adds classes to your body tag like .webkit, .chrome etc which you can thus use in your stylesheet.

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