2010-04-21 4 views
1

У меня есть код CSS, который скрывает курсор на веб-странице (это клиент, столкнувшийся с статическим экраном без взаимодействия). Код, который я использую для этого, приведен ниже:Хромированный CSS

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

Blank.cur - полностью пустой файл курсора.

Этот код прекрасно работает во всех браузерах, когда я размещаю веб-файлы на своем локальном сервере, но когда я загружаюсь на веб-сервер Windows CE (наш производственный блок), курсор представляет собой черный ящик. Странный.

После некоторого тестирования кажется, что у хром только проблема с полностью пустыми файлами курсора при обслуживании с веб-сервера WinCE, поэтому я создал пустой курсор с одним пикселем белого цвета, особенно для хрома. Как мне настроить таргетинг на это правило CSS на хром? т.е.

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

У вас есть доступ к серверному языку? –

+0

ASP (не .NET) только ... – Chris

ответ

3

Когда у меня была аналогичная проблема, я выполнил эту проверку на стороне сервера. Единственный способ, которым я мог найти, - это обнюхать пользовательский агент. Здесь из представления Rails.

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

Можно ли это сделать в ASP (не .NET)? – Chris

+0

В итоге я использовал метод, очень похожий на этот, но в ASP. – Chris

2

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> 

Основываясь на комментарий Оли.

+3

Приятная идея, но перестанет работать, как только другие браузеры начнут внедрять 'nth-of-type'. Не настоящий вариант ИМО. –

+0

Да, правда. После реализации предложение Оли будет лучше. –

+0

True Pekka, но хорошая идея в любом случае marharepa – Chris

3

Хром не имеет никаких условных комментариев, таких как IE.

Моя первая идея состояла в том, чтобы использовать немного Javascript, чтобы очень быстро взглянуть на строку useragent, а затем снова применить стиль с помощью javascript. Если вы уже используете jQuery, это будет довольно просто.

+0

Не могли бы вы помочь мне с кодом для этого? – Chris

+0

Это было бы проблематично, если JS отключен. Но это маловероятно для Chrome, поэтому я думаю, что это сработает;) –

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 ,

Смежные вопросы