Question

我有一些CSS代码将光标隐藏在网页上（它是面向静态屏幕而没有交互的客户端）。我用来执行此操作的代码如下：

*, html { cursor: url('/web/resources/graphics/blank.cur'), pointer; }

Blank.cur是一个完全空白的光标文件。

当我在本地服务器上托管Web文件时，此代码在所有浏览器中都能很好地工作，但是当我上传到Windows CE Web服务器（我们的生产单元）时，光标将自身表示为黑盒子。奇

经过一些测试后，看起来Chrome在WinCE Web服务器上提供时只有完全空白的光标文件有问题，因此我创建了一个空白光标，其中一个像素为白色，专门用于chrome。然后，我如何将此CSS规则专门针对chrome？即。

*, html { cursor: url('/web/resources/graphics/blank.cur'), pointer; }
<!--[if CHROME]>
*, html { cursor: url('/web/resources/graphics/blankChrome.cur'), pointer; }
<![endif]-->

Answer 1

Chrome没有像IE那样的任何条件评论。

我的第一个想法是使用一些Javascript来快速查看useragent字符串，然后再次使用javascript应用该样式。如果您已经在使用jQuery，那将非常简单。

Answer 2

当我遇到类似问题时，我执行了此检查服务器端。我能找到的唯一方法是嗅探用户代理。这里来自Rails视图。

<% if request.env["HTTP_USER_AGENT"] =~ /chrome/i %>
  <%= stylesheet_link_tag "chrome" %>
<% end>

Answer 3

转换CSS，改为以IE为目标：

*, html { cursor: url('/web/resources/graphics/blankChrome.cur'), pointer; }
<!--[if IE]>
*, html { cursor: url('/web/resources/graphics/blank.cur'), pointer; }
<![endif]-->

此外，根据https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property Firefox和Safari（可能是Chrome）支持游标的GIF，因此您可以尝试使用1px透明GIF。

Answer 4

body:nth-of-type(1) { cursor: url('/web/resources/graphics/blank.cur'), pointer; }仅适用于Google Chrome;）

<script type="text/javascript">
if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Chrome/x.x 
 var cversion=new Number(RegExp.$1);
 if (cversion>1)
    with(document) {
    //start the css
    write("<style type='text/css'>");
    write("html { cursor: url('/web/resources/graphics/blank.cur'), pointer; }");
    write("</style>");
  }
}
</script>

根据Oli的评论。

Chrome针对CSS

4 个答案: