CSS 你可以定位谷歌浏览器吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2447511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you target Google Chrome?
提问by Kyle
I need to position this update button on www.euroworker.no/order (you'll have to add an item to the cart, use the Kj?p button to add and Handlevogn to view the cart). Works in FF and IE. (Although there is another alignment problems with IE) but not in Chrome or Safari. I had it working before, but the only thing I can think of to do is target safari and Chrome. Is this possible?
我需要在 www.euroworker.no/order 上放置此更新按钮（您必须将商品添加到购物车，使用 Kj?p 按钮添加并使用 Handlevogn 查看购物车）。适用于 FF 和 IE。（虽然 IE 存在另一个对齐问题）但在 Chrome 或 Safari 中没有。我以前用过它，但我唯一能想到的就是瞄准 safari 和 Chrome。这可能吗？
Here's the CSS and HTML(Smarty) for you.
这是给你的 CSS 和 HTML(Smarty)。
HTML(Smarty):
HTML（聪明）：
{capture assign="cartUpdate"}
<div id="cartUpdate"><!--<input type="submit" class="submit" value="{tn _update}" />-->
<button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value=""> </button> </div>
{/capture}
{assign var="cartUpdate" value=$cartUpdate|@str_split:10000}
{php}$GLOBALS['cartUpdate'] = $this->get_template_vars('cartUpdate'); $this->assign_by_ref('GLOBALS', $GLOBALS);{/php}
{form action="controller=order action=update" method="POST" enctype="multipart/form-data" handle=$form id="cartItems"}
CONTENT
{/form}
And the CSS:
和 CSS：
#oppdatersubmit {
background-image:url(../../upload/oppdater.png);
background-repeat:no-repeat;
background-position:left;
background-color:none;
border:none;
overflow:hidden;
outline:none;
white-space: nowrap;
width:77px;
height:25px;
cursor:pointer;
position:absolute;
}
#cartUpdate {
position:absolute;
width:160px;
height:30px;
left:580px;
bottom:130px;
}
Need to change these for Chrome and Safari.
需要为 Chrome 和 Safari 更改这些。
Thanks.
谢谢。
回答by Kyle
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*Chrome CSS here*/
#cartUpdate {
position:absolute;
width:160px;
height:30px;
left:660px;
bottom:40px;
}
}
Fixed the problem :)
修复了问题:)
UPDATE
更新
This resource works better: CSS browser/OS selectors with JS.
此资源效果更好：带有 JS 的 CSS 浏览器/操作系统选择器。
回答by Hbirjand
There are some browser hacks available for targeting a specific browser,some of them will work on all the versions of the browser,and some one them not.
有一些浏览器黑客可用于针对特定浏览器，其中一些适用于所有版本的浏览器，而另一些则不适用。
Here is the list of some the Google Chromes's hacks:
以下是一些谷歌浏览器的黑客列表：
WebKit hack:
WebKit 黑客：
.selector:not(*:root) {}
- Google Chrome:All the versions
- Safari:All the versions
- Opera :14 and Later
- Android:All the versions
- 谷歌浏览器：所有版本
- Safari：所有版本
- 歌剧：14 岁及以后
- 安卓：所有版本
Supports Hacks:
支持黑客：
@supports (-webkit-appearance:none) {}
Google Chrome 28,and Google Chrome > 28, Opera 14 and Opera > 14
谷歌浏览器 28、谷歌浏览器 > 28、Opera 14 和 Opera > 14
- Google Chrome:28 and Later
- Opera :14 and Later
- 谷歌浏览器：28 及更高版本
- 歌剧：14 岁及以后
Property/Value Hacks:
财产/价值黑客：
.selector { (;property: value;); }
.selector { [;property: value;]; }
Google Chrome 28,and Google Chrome < 28, Opera 14 and Opera > 14,and Safari 7 and Less than 7. - Google Chrome:28 and Before- Safari:7 and Before- Opera :14 and Later
谷歌浏览器28，和谷歌Chrome浏览器<28，14歌剧院和Opera> 14，和Safari 7且小于7 -谷歌浏览器：28和前- Safari浏览器：7和前-歌剧：14及更高版本
JavaScript Hacks:1
JavaScript 技巧：1
var isChromium = !!window.chrome;
- Google Chrome:All the versions
- Opera :14 and Later
- Android:4.0.4
- 谷歌浏览器：所有版本
- 歌剧：14 岁及以后
- 安卓：4.0.4
JavaScript Hacks:2 {Webkit}
JavaScript 技巧：2 {Webkit}
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- Google Chrome:All the versions
- Safari:3 and Later
- Opera :14 and Later
- 谷歌浏览器：所有版本
- Safari: 3 及更高版本
- 歌剧：14 岁及以后
JavaScript Hacks:3
JavaScript 技巧：3
var isChrome = !!window.chrome && !!window.chrome.webstore;
- Google Chrome:14 and Later
- 谷歌浏览器：14 及更高版本
Media Query Hacks:1
媒体查询技巧：1
@media \0 screen {}
- Google Chrome:22 to 28
- Safari:7 and Later
- 谷歌浏览器：22 到 28
- Safari：7 及更高版本
Media Query Hacks:2
媒体查询技巧：2
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
- Google Chrome:29 and Later
- Opera:16 and Later
- 谷歌浏览器：29 及更高版本
- 歌剧：16 岁及以后
For more information please visit this website
欲了解更多信息，请访问此网站
