CSS text-выделение курсора ie7, странное поведение
-
06-07-2019 - |
Вопрос
Странный человек здесь, надеющийся получить какую-то обратную связь, которая укажет мне правильное направление.
Если мой #wrapper
или к какому-либо из дочерних divs не применен цвет фона, ie7 изменяет обычный курсор "pointer" на курсор "text-select" при наведении курсора мыши на страницу (независимо от того, наведен ли курсор мыши на текст или нет).
Я думал, что устранил проблему некоторое время назад, но когда я удаляю цвет фона из своего #wrapper
или любой из дочерних элементов исчезает, проблема возникает снова.
Просто ищу несколько подсказок или то, что я должен проверить.
#wrapper {
overflow: hidden;
margin: 0 auto;
width: 960px; /* using 960.gs */
}
#children {
display: inline;
float: left;
margin: 0 10px;
width: 940px;
}
Редактировать:
Кажется, это потому, что divs "hasLayout", но я все еще не уверен, как это исправить.Видишь эта ссылка.
ПРАВКА 2:
Я не могу найти больше информации об этой "ошибке ie7". Любой, у кого есть какие-либо идеи, или даже если вы знаете об этой ошибке и можете просто сообщить мне, чтобы я знал, что я не сумасшедший.Я снова начинаю по-настоящему разочаровываться в Microsoft.Это уже стоило мне дополнительных нескольких часов работы на этой неделе.Кажется, это никогда не кончится.
ПРАВКА 3:
Вот еще одно звено о ком-то, у кого такая же проблема.
ПРАВКА 4:
STACKOVERFLOW.com страдает от этого бага!Так же как и mashable.com.Я гарантирую, что у МНОГИХ веб-разработчиков есть эта ошибка на их сайте, и они даже не знают об этом.
Проверьте это сами...наведите курсор на страницу любого сайта.Обратите внимание, что он превращается в курсор для выбора текста, когда этого не должно быть.
Похоже, это было бы легко исправить с помощью cursor
свойство, но проблема заключалась бы в запуске правильного поведения при выборе текста курсором, когда это необходимо.
Решение
Не слишком ли банально явно указывать, какой курсор куда должен двигаться?
html {
cursor: default;
}
h1, h2, h3, h4, h5, h6,
p, li, label, td, th {
cursor: text;
}
a:link, a:visited, a:hover, a:active {
cursor: pointer;
}
и т.д..
Другие советы
Я почти уверен, что сталкивался с этим раньше, но, вероятно, это слишком тонко, чтобы действительно заметить во время поверхностного тестирования браузера.Но у меня, конечно, также были проблемы, исправленные установкой цвета фона.
Насколько я могу судить, лучший способ исправить это - расположить элемент, вызывающий проблемы, или добавить вокруг него расположенную оболочку div.Скорее всего, вы бы использовали position: relative
, хотя absolute
и fixed
тоже должно сработать.
Обычно работает позиционирование самого элемента, но добавление div-оболочки может работать более последовательно.
Например.добавление position: relative
к тому .post-text
класс фиксирует курсор на вопросах и ответах на этой странице.
Прозрачный GIF размером 1x1 пиксель работает, а также является отличным решением для Это и другие ошибки в IE с 6 по 8.Я бы добавил что-то вроде этого к своим условным комментариям для всех IE:
* {
background: url('images/fix1.gif');
}
Вы пробовали устанавливать background-color:transparent;
явно?Помогает ли это?
Это может показаться уродливым взломом, но вы пробовали установить прозрачный GIF размером 1x1 пиксель (ОН ЖЕ spacer) в качестве фона?
Это не идеально, но для этого небольшого примера, похоже, это работает для IE 7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="overflow: hidden; margin: 0 auto; width: 140px;">
<div style="position: relative; display: inline;">
<p>
Here is some test text that will wrap.
</p>
</div>
</div>
</body>
</html>
Я понятия не имею, почему это работает, и это, конечно, не идеально.По какой-то причине помещение элемента p во встроенный относительно расположенный div заставляет курсор мыши вести себя более так, как я ожидал.
Я не уверен, что это работает в более широком смысле, хотя при наличии иерархии элементов.
Я понимаю, что это не идеальный ответ, но он может натолкнуть на другие идеи.
Решение Далилы, только немного упрощенное, отлично работает для меня, а также решает проблему меркатора.
div { cursor: default; }
div * { cursor: auto; }
Проблема в том, что вам нужно создать другой css-файл и обратиться к нему с помощью условных комментариев, чтобы не тормозить работу других браузеров.
PS:Эта проблема становится очень раздражающей на веб-сайтах с темным фоном.