CSS text-выделение курсора ie7, странное поведение

StackOverflow https://stackoverflow.com/questions/1621132

  •  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:Эта проблема становится очень раздражающей на веб-сайтах с темным фоном.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top