Курсор сам по себе (IE)


Содержание

10 возмутительных багов IE и пути их решения

Сегодня я намерен представить вам 10 самых распространенных багов, имеющих место в браузерах IE, а так же расскажу как их избежать.

Вступление

В практике каждого веб-разработчика были проблемы, связанные с непониманием браузерами IE некоторых элементов кода. И я как разработчик тоже постоянно сталкиваюсь с такими причудами IE, что порой просто хочется биться головой об стенку! Однако, время идет, мы учимся на своих ошибках, хотя правильней будет сказать не своих, а браузера IE, и начинаем понимать и привыкать к его странному поведению. Нам приходится с этим мириться, так как еще есть пользователи, продолжающие пользоваться 6 версией IE. Самый лучший способ предупредить проблемы — это сверять каждый свой шаг с поведением различных браузеров. Ведь проще устранить ошибку сразу же, чем потом рыскать среди тысячи строк html и css кодов.

Многие компании настроены против 6 версии IE, но людям, продолжающим им пользоваться, похоже, все равно. Что делать? Продолжать бороться с багами данного браузера. Но хочу вас порадовать — ежемесячная статистика, которую нам любезно представляет w3cschool, гласит, что количество упрямых пользователей IE6 значительно сократилось за последние годы. В январе 2006 года их было 60,3%, а в августе 2009 года их зарегистрировано уже 13,6%. Думаю, к середине 2010 года мы, наконец, избавимся от IE6:) О ДА.

А пока, я вас ознакомлю со списком багов и способами их устранения, и, надеюсь, тем самым немного облегчу вам жизнь.

1. Баг IE6, выдающий текст повторно

Как раз перед тем, как сесть писать эту статью я столкнулся вот с таким багом: из ниоткуда выскакивает дублированный кусок текста, и размещается он прямо под оригинальным текстом. Я начал экспериментировать и о удача!, я нашел как с ним бороться.

Есть множество способов решить эту проблему, но ни один из них мне не подходил, так как я работал над очень сложным проектом. И вот я нашел очень простой и интересный способ: я просто добавил ряд неразрывных пробелов прямо за оригинальным текстом.

Однако, Hippy Tech Blog, к которому я тоже обращался за помощью, предлагает другие решения, к тому же он поясняет причину данного бага — оказывается во всем виноваты html теги комментариев, ведь IE6 не воспринимает их должным образом.

• обрамлять комментарии тегами
• удалять все комментарии
• в предшествующем элементе float указывать стиль
• использовать отрицательные поля в соответствующих плавающих div
• добавить к оригинальному тексту примерно 10 пробелов (мой способ)

2. Position Relative и Overflow Hidden

Практически каждый раз, когда я пишу урок по jQuery , я сталкиваюсь с одной и той же проблемой, ведь я привык использовать overflow:hidden. Баг появляется, когда есть исходный (родительский) элемент overflow со значением hidden и дочерний элемент с позицией :relative.

Что же происходит вы можете увидеть вот в этой статье — position:relative and overflow in internet explorer

Решение
• добавить position relative и родительскому элементу

3. Min-Height для IE

IE просто игнорирует min-height свойства, но вы теперь можете справиться и с этой проблемой. Данное решение магически действует не только на IE6, но и на Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

4. Бикубическое отображение масштабируемых изображений

Вам понравится данное решение. Раздражает ли вас плохое качество картинок при изменении их масштаба в браузере IE? Согласитесь IE выполняет эту задачу не очень качественно.


5. Прозрачность PNG

Полагаю, что каждый знаком с этой проблемой, и все же я уделю и этому пункту немного времени.
Если вам нужно прозрачное изображение, и изображения в формате gif не могут дать вам нужного эффекта, вам пригодится данный прием. Но помните, что используя этот прием и устанавливая PNG в качестве фона, вы не сможете задать его позицию.

6. Прозрачный фон встроенного окна IFrame

В firefox и safari нам не приходится что-либо настраивать, так как они делают фон iframe прозрачным по умолчанию, тогда как в IE такое не предусмотрено. Здесь вам нужен будет атрибут allowTransparency, а так же специальный CSS код.

7. Отключение вертикальной полосы прокрутки, предусмотрено в IE по умолчанию

По умолчанию IE всегда отображает вертикальную полосу прокрутки, даже если содержимое страницы полностью вмещается в окно браузера. В данном случае вы можете воспользоваться свойством overflow:auto , чтобы полоса прокрутки появлялась только при необходимости.

8. Псевдокласс :hover

IE поддерживает только псевдокласс :hover для элемента anchor. Но ведь того же самого эффекта можно добиться и используя jQuery.

9. Блочная модель — Box Hack Model

Это самый частый баг. Дело в том, что IE рассчитывает ширину не так, как остальные браузеры. В соответствии со стандартом консорциума W3C, полная ширина должна подсчитываться следующим образом:

А вот IE делает подсчет, не учитывая данные отступов и границ

Можно воспользоваться следующим CSS кодом. Все стандартные браузеры смогут прочесть такую строку — width:180px, кроме IE5.

10. Удваивание полей

Илон Маск рекомендует:  Процедуры работы с множествами

Если у вас имеются float элементы со значениями полей left или right, то 6 версия IE удваивает поля. Например, поле (интервал) шириной в 5 пикселей вот в такой строке margin-left:5px в IE6 превратится в поле с шириной в 10 пикселей. Данную проблему можно устранить добавив всего одну строку display:inline.

Надеюсь, данный урок вам очень пригодится:)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.queness.com
Перевел: Максим Шкурупий
Урок создан: 16 Ноября 2009
Просмотров: 37462
Правила перепечатки

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.


Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

При наведении на элемент, необходимо чтоб курсор пропадал

Возможно сделать так

Это будет работать в safari, chrome, firefox.

В opera не будет. Про ie не знаю (думаю что тоже не будет)

Как сделать такую штуку для всех браузеров?

но в вашем случае он не исчезает, а приобретает вид крестика.

Пользовательский образ курсора не работает во всех IE?


Я думаю, что я пробовал разные методы, предлагаемые по всему Интернету, но ничего не получилось. Это мой текущий код css:

Он отлично работает, за исключением IE.

К сожалению, cursor является обычным явлением в IE, по крайней мере до 8 и включает 8

В Internet Explorer для Windows вплоть до версии 8, включая относительное значение URI указывается во внешнем файле таблицы стилей базовый URI считается URI документа, содержащего а не URI таблицы стилей, в которой декларация появляется.

Возможно, вам захочется использовать conditional comment для целевого IE, а затем подать его в модифицированное правило стиля с помощью другого url .

Я решил таким образом захватить курсор в Internet Explorer, сославшись на ответ @JasonGennaro:

В Internet Explorer для Windows вплоть до версии 8, включая относительное значение URI указывается во внешнем файле таблицы стилей базовый URI считается URI документа, содержащего а не URI таблицы стилей, в которой декларация появляется.

Поскольку разные браузеры обрабатывают относительный URI по-разному, стиль курсора позволяет использовать список URL-адресов. У вас может быть один путь, который работает для IE и тот, который работает для других браузеров:

В моей настройке первый url работает для IE11 (и ранее), потому что script, который использует курсор, находится в ‘cgi-bin/app’, в то время как файлы .cur и .css находятся в ‘app/images’, IE использует расположение документа в качестве базы, поэтому мне нужно добавить дополнительную информацию о пути, чтобы найти файл курсора. Второй url работает в Firefox, потому что .cur и .css находятся в одном месте, а Firefox использует базу .css в качестве базы, поэтому дополнительная информация о пути не требуется.

Из документации msdn: URL (URI) Internet Explorer 6 и более поздних версий. Курсор определяется автором, используя пользовательский URI, такой как url ​​(‘mycursor.cur’). Курсоры типа .CUR и .ANI являются единственными поддерживаемыми типами курсоров .

эта работа для меня доказана в IE10, INDEXED в index.html(вы должны использовать абсолютные маршруты)

Свойство cursor поддерживается во всех основных браузерах.

Примечание. Opera 9.3 и Safari 3 не поддерживают значения URL.

Примечание. Значение «inherit» не поддерживается в IE7 и ранее. IE8 требуется a! DOCTYPE. IE9 поддерживает «inherit».

Для работы в IE вам нужно указать полный путь к файлу CUR. Например:.

Дневник Web-разработчика

Заметки программиста, мысли и полезные ссылки

Фиксим баг IE курсор в инпуте просвечивает через выпадающий блок

Сегодня у меня для вас очередное решение «проблемы века»))
В одном из проектов я столкнулся с проблемой: на странице был инпут и если поставить в него курсор, чтобы он был активным, а потом навести мышь на меню, чтобы появился выпадающий блок, то через него был виден курсор мигающий в инпуте.
Баг был только в эксплорере и обуславливался тем, что инпут был расположен в коде ниже, чем меню и выпадающие блоки, поэтому z-index не срабатывал.
Немного подумав я написал небольшой js скрипт который и решил эту проблему.


Пример написан с использование jQuery, но его без проблем можно переделать на чистый js.
Код работает только в IE и не нагружаеет адекватные браузеры благодаря условным комментариям.

Надеюсь, что помог вам.

Один комментарий к “ Фиксим баг IE курсор в инпуте просвечивает через выпадающий блок ”

Как изменить курсор браузера с помощью CSS

Дата публикации: 2020-08-29

От автора: браузер автоматически меняет курсор мыши в контексте множества элементов интерфейса. Например, при наведении на ссылки он меняется на руку. Однако есть ситуации, когда вам потребуется вручную менять иконку указателя мыши для определенных операций (иконка компаса, показывающая, что элемент можно передвинуть). Обычно это делается через CSS, в частности через свойство cursor.

Думайте, куда наводите указатель

Крайне важно понимать, что нельзя изменять курсор мыши просто «потому что». Указатель мыши – первичный метод взаимодействия пользователя с вашим сайтом, и его изменение просто потому, что вам так хочется, может полностью разрушить ожидания пользователя от интерфейса, что приведет к разочарованию. Пользователь просто покинет сайт. Если вы используете свойство cursor, оно всегда должно подходить под вашу текущую задачу и соответствовать ожиданиям пользователя.

Илон Маск рекомендует:  Системы голосования на web серверах

Также важно отметить тот факт, что изменение курсора в CSS не затрагивает его функционал. Если задать свойство cursor: grab, предмет автоматически не станет перетаскиваемым. Функциональная сторона вопроса обрабатывается на стороне JavaScript. CSS всего лишь изменяет представление курсора.

Свойство cursor задается для конкретных элементов. Часто это может быть :hover или другое похожее состояние.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Курсор сам по себе (IE)

Hide mouse cursor when typing is not working in IE11 Windows7 — I saw a post that devs were looking at this in 2011? Slow progress huh?

This is really annoying when you have to move the cursor to see what you are typing.

Ответы

Please first make sure that Mouse Properties\Pointer options\Hide pointer while typing is ticked.

If this option is already ticked, then try following steps to troubleshoot:


Update the driver for the mouse to get the best performance.

Choose a different cursor as Rob said for a test.

If this issue occurred recently, check if you have any newly installed programs or IE add-ons which cause this issue, you can test this in no add-ons mode, click start button, type «internet» in the search box, choose «internet explorer (No add-on)».

* I test in My IE, I have Hide pointer while typing checked, and in some typing boxes in IE the cursor will hide automatically, while some are not, but I think it’s not an annoying issue for me.*

cursor:pointer on pseudo element IE

I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:’X’; . I need the cursor to become a pointer on that «X» so I used :

It works fine in Chrome and Firefox but it doesn’t seem to work in Internet Explorer (testing on IE11 windows 7).

DEMO (test in IE)

I also tried with cursor:hand; but it doesn’t solve the issue. How can I make the cursor a pointer while hovering the «X» but not on the text of the div?

—EDIT—

I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.

5 Answers 5

I’m really late to the game, but I just now figured out a solution to this problem.

This solution allows a pointer on the child element, while retaining a default cursor on the parent element.

(See the accepted answer here for a solution that doesn’t include keeping the parent element’s cursor default: cursor: pointer doesn’t work on :after element?)

First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.

Set the parent element to cursor: pointer .

Then, setting the parent element to pointer-events: none will allow you to «click/hover through» the parent element.

Then, for the pseudo element, just re-enable pointer events with pointer-events: auto .


установить позицию курсора в IE и курсор потеряет

В contenteditable div я набираю некоторые слова, такие как @ab, и получаю всплывающее окно пользователя, затем, если я выберу пользователя ‘abc’ во всплывающем окне с помощью мыши, пользователь может вставить @abc в div, но курсор потеряет. Если я выберу пользователя по клавиатуре, это нормально.

IE: // currentRange include @ab // elem является contenteditable div

1 ответ

Вызовите pasteHTML() для диапазона после его выбора, и курсор автоматически переместится в позицию сразу после вставленного содержимого:

Уязвимость в Internet Explorer позволяет отслеживать курсор мыши

Обнаруженная проблема в безопасности браузера снижает безопасность пользователей.

Уязвимость затрагивает версии IE от 6 по 10 и заключается в том, что на специально сформированной странице можно отслеживать все перемещения мыши пользователя в любом месте экрана, в том числе, когда окно браузера свернуто полностью, либо уменьшено в размере. Более того, код, эксплуатирующих уязвимость, можно разместить в рекламных объявлениях, которые отображаются на миллионах обычных ресурсов. И все будет работать!

В Microsoft Security Research Center признали наличие проблемы, но о сроках ее закрытия пока даже примерно ничего не сообщается. Позже, в официальном блоге разработчиков браузера появилась запись о том, что проблема в последнее время оказалась раздута. Они сотрудничают с множеством сторонних компаний для изучения данного вопроса и все привлеченные эксперты свидетельствуют о том, что данная уязвимость хоть и имеет место быть, однако не несет никакой угрозы для пользователей. Страница, на которой возможна эксплуатация, может отслеживать только перемещение мыши, без какой-либо возможности доступа к контенту страницы. В тематических статьях много было сказано про возможность отслеживания нажатий на виртуальную клавиатуру, но разработчики акцентируют внимание на том, что данную возможность очень сложно зафиксировать и использовать.

Также, в записи упоминается о том, что подобное поведение имеется и в других браузерах (правда, не сказано каких) и о том, что большое значение наличие отслеживания мыши в браузере играет только для аналитических компаний, занимающихся сбором данных о пользователях, в том числе и не совсем «белыми» методами. В числе аналитических компаний и сервис Spider.io, работники которого и выпустили статью об уязвимости в Internet Explorer.

В Microsoft будут следить за проблемой и делиться новой информацией, но, как уже сказано выше, о каких-то конкретных сроках закрытия уязвимости данных пока нет. Для желающих протестировать свой IE создана специальная демо-страница.

10 возмутительных багов IE и пути их решения

Сегодня я намерен представить вам 10 самых распространенных багов, имеющих место в браузерах IE, а так же расскажу как их избежать.

Вступление

В практике каждого веб-разработчика были проблемы, связанные с непониманием браузерами IE некоторых элементов кода. И я как разработчик тоже постоянно сталкиваюсь с такими причудами IE, что порой просто хочется биться головой об стенку! Однако, время идет, мы учимся на своих ошибках, хотя правильней будет сказать не своих, а браузера IE, и начинаем понимать и привыкать к его странному поведению. Нам приходится с этим мириться, так как еще есть пользователи, продолжающие пользоваться 6 версией IE. Самый лучший способ предупредить проблемы — это сверять каждый свой шаг с поведением различных браузеров. Ведь проще устранить ошибку сразу же, чем потом рыскать среди тысячи строк html и css кодов.

Илон Маск рекомендует:  Что такое код msql_select_db

Многие компании настроены против 6 версии IE, но людям, продолжающим им пользоваться, похоже, все равно. Что делать? Продолжать бороться с багами данного браузера. Но хочу вас порадовать — ежемесячная статистика, которую нам любезно представляет w3cschool, гласит, что количество упрямых пользователей IE6 значительно сократилось за последние годы. В январе 2006 года их было 60,3%, а в августе 2009 года их зарегистрировано уже 13,6%. Думаю, к середине 2010 года мы, наконец, избавимся от IE6:) О ДА.

А пока, я вас ознакомлю со списком багов и способами их устранения, и, надеюсь, тем самым немного облегчу вам жизнь.

1. Баг IE6, выдающий текст повторно

Как раз перед тем, как сесть писать эту статью я столкнулся вот с таким багом: из ниоткуда выскакивает дублированный кусок текста, и размещается он прямо под оригинальным текстом. Я начал экспериментировать и о удача!, я нашел как с ним бороться.


Есть множество способов решить эту проблему, но ни один из них мне не подходил, так как я работал над очень сложным проектом. И вот я нашел очень простой и интересный способ: я просто добавил ряд неразрывных пробелов прямо за оригинальным текстом.

Однако, Hippy Tech Blog, к которому я тоже обращался за помощью, предлагает другие решения, к тому же он поясняет причину данного бага — оказывается во всем виноваты html теги комментариев, ведь IE6 не воспринимает их должным образом.

• обрамлять комментарии тегами
• удалять все комментарии
• в предшествующем элементе float указывать стиль
• использовать отрицательные поля в соответствующих плавающих div
• добавить к оригинальному тексту примерно 10 пробелов (мой способ)

2. Position Relative и Overflow Hidden

Практически каждый раз, когда я пишу урок по jQuery , я сталкиваюсь с одной и той же проблемой, ведь я привык использовать overflow:hidden. Баг появляется, когда есть исходный (родительский) элемент overflow со значением hidden и дочерний элемент с позицией :relative.

Что же происходит вы можете увидеть вот в этой статье — position:relative and overflow in internet explorer

Решение
• добавить position relative и родительскому элементу

3. Min-Height для IE

IE просто игнорирует min-height свойства, но вы теперь можете справиться и с этой проблемой. Данное решение магически действует не только на IE6, но и на Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

4. Бикубическое отображение масштабируемых изображений

Вам понравится данное решение. Раздражает ли вас плохое качество картинок при изменении их масштаба в браузере IE? Согласитесь IE выполняет эту задачу не очень качественно.

5. Прозрачность PNG

Полагаю, что каждый знаком с этой проблемой, и все же я уделю и этому пункту немного времени.
Если вам нужно прозрачное изображение, и изображения в формате gif не могут дать вам нужного эффекта, вам пригодится данный прием. Но помните, что используя этот прием и устанавливая PNG в качестве фона, вы не сможете задать его позицию.

6. Прозрачный фон встроенного окна IFrame

В firefox и safari нам не приходится что-либо настраивать, так как они делают фон iframe прозрачным по умолчанию, тогда как в IE такое не предусмотрено. Здесь вам нужен будет атрибут allowTransparency, а так же специальный CSS код.

7. Отключение вертикальной полосы прокрутки, предусмотрено в IE по умолчанию

По умолчанию IE всегда отображает вертикальную полосу прокрутки, даже если содержимое страницы полностью вмещается в окно браузера. В данном случае вы можете воспользоваться свойством overflow:auto , чтобы полоса прокрутки появлялась только при необходимости.

8. Псевдокласс :hover

IE поддерживает только псевдокласс :hover для элемента anchor. Но ведь того же самого эффекта можно добиться и используя jQuery.


9. Блочная модель — Box Hack Model

Это самый частый баг. Дело в том, что IE рассчитывает ширину не так, как остальные браузеры. В соответствии со стандартом консорциума W3C, полная ширина должна подсчитываться следующим образом:

А вот IE делает подсчет, не учитывая данные отступов и границ

Можно воспользоваться следующим CSS кодом. Все стандартные браузеры смогут прочесть такую строку — width:180px, кроме IE5.

10. Удваивание полей

Если у вас имеются float элементы со значениями полей left или right, то 6 версия IE удваивает поля. Например, поле (интервал) шириной в 5 пикселей вот в такой строке margin-left:5px в IE6 превратится в поле с шириной в 10 пикселей. Данную проблему можно устранить добавив всего одну строку display:inline.

Надеюсь, данный урок вам очень пригодится:)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.queness.com
Перевел: Максим Шкурупий
Урок создан: 16 Ноября 2009
Просмотров: 37463
Правила перепечатки

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL