仅适用于Chrome的CSS？-CSSthatonlyappliestoChrome?

2  

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 #s and #searchsubmit rule-sets

将相同的高度值应用于#s和#searchsubmit规则集

• remove font: 14px "century gothic", Arial, Helvetica, sans-serif; from #searchsubmit

删除字体:14px“世纪哥特式”,Arial,Helvetica,sans-serif;来自#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 #s rule-set to 0 (i.e. change 8px to 0px) and then add a margin-top: declaration to both #s and #searchsubmit and give both the same value, for example margin-top:8px;

执行上述操作后,如果在FF和Chrome中仍然看起来不正确,请将#s规则集的第一个和第二个填充值设置为0(即将8px更改为0px),然后添加margin-top :声明#s和#searchsubmit并给两个相同的值,例如margin-top:8px;

• if you're still having issues, try copying this line: font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; from your #s rule-set and add it to your #searchsubmit rule-set so that it appears in both rule-sets.

如果你还有问题,请尝试复制这一行: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.

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

34  

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

要使用仅适用于Webkit浏览器的CSS(Chrome和Safari):

@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.

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

3  

You could check to see if navigator.appVersion contains 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 
}

1  

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

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

1  

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黑客。虽然我不鼓励使用这些黑客,但它可能适合您的问题的快速解决方案。

1  

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 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}然后简单地调整表单元素的高度和宽度以适合表单背景的布局。我以前使用但无论我如何设计或填充它,都无法使对齐方式完全正确。在您第一次调整表单元素的边距,填充和绝对定位(如果需要)之后,此方法几乎可以正常工作(您可能希望在测试期间保持边框可见,这样您就可以正确放置它)。

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;}放在我的搜索提交按钮上,有时甚至是其他表单输入,以便给出一个可视化的线索,这是一个可提交的表单,并鼓励人们点击它。

-1  

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.

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