CSS texto-select cursor IE7, comportamento estranho

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

  •  06-07-2019
  •  | 
  •  

Pergunta

Estranho um aqui, na esperança de obter algum feedback para me apontar na direção certa.

Se o meu #wrapper ou qualquer uma das crianças divs não têm um background-color aplicada a eles, IE7 muda o cursor normal "ponteiro" em um "text-escolha" cursor ao passar o mouse em torno da página (se passar o mouse sobre o texto ou não).

Eu pensei que eu tinha fixado o problema um pouco antes, mas quando eu remover o background-color do meu #wrapper ou qualquer um dos divs crianças, ao reaparecimento do problema.

Apenas à procura de algumas sugestões ou o que eu deveria ser verificação. 

#wrapper {
    overflow: hidden;
    margin: 0 auto;
    width: 960px; /* using 960.gs */
}

#children {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 940px;
}

EDIT:

Parece ser porque as divs "hasLayout", mas eu ainda não tenho certeza de como corrigi-lo. Consulte este link.

EDIT 2:

Não consigo encontrar mais informação sobre este "bug IE7." Qualquer um que tenha alguma idéia, ou mesmo se você está ciente desse bug e pode apenas me avise para que eu sei que eu não sou louco. Estou ficando realmente frustrado com a Microsoft novamente. Já me custou um extra algumas horas de trabalho da semana. Parece que isso nunca acaba.

EDIT 3:

Aqui está outro link de alguém com o mesmo problema.

EDIT 4:

STACKOVERFLOW.com sofre com esse bug! O mesmo acontece com mashable.com . Eu garanto devs web Muitos têm este bug em seu site e eles nem sequer sabem disso.

Confira por si mesmo ... Passe o cursor em torno da página de qualquer site. Aviso que se transforma em um cursor de texto-select quando não deveria.

Parece que seria fácil de resolver com a propriedade cursor, mas o problema seria desencadear um comportamento adequado de texto, selecione-cursor quando necessário.

Foi útil?

Solução

É muito hacky explicitamente estado que cursor deve ir para onde? 

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;
}

etc ..

Outras dicas

Eu tenho certeza que eu ter encontrado isso antes, mas é provavelmente um pouco sutil demais para realmente aviso durante alguns testes navegador superficial. Mas eu certamente também teve problemas corrigidos, definindo uma cor de fundo.

Tanto quanto eu posso dizer, a melhor maneira de corrigi-lo é posicionar o elemento que causa os problemas, ou adicionar um posicionado envoltório div em torno dele. Você usaria provavelmente position: relative, embora absolute e fixed deve funcionar também.

O posicionamento do elemento em si normalmente funciona, mas a adição de um div invólucro pode funcionar de forma mais consistente.

por exemplo. acrescentando position: relative para as correções de classe .post-text o cursor sobre as perguntas e respostas nesta página.

Os trabalhos GIF px transparente 1x1 e é também uma excelente correção para este e outros bugs no iE 6 a 8. gostaria de acrescentar algo como isto aos meus comentários condicionais para todos iE: 

* {
    background: url('images/fix1.gif');
}

Você já tentou definir background-color:transparent; explicitamente? Isso ajuda?

Isto pode soar como uma gambiarra, mas você já tentou configurar um transparente 1x1 px GIF (AKA espaçador) como pano de fundo?

Este não é perfeito, mas para este pequeno exemplo parece trabalho para 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>

Eu não tenho idéia por que isso parece trabalho, e certamente não é o ideal. Por alguma razão, colocando o elemento p em uma div em linha relativamente posicionado faz com que o cursor do mouse se comportar mais como eu esperaria.

Eu não tenho certeza que isso funciona em um sentido mais amplo embora quando há uma hierarquia de elementos.

Sei que isso não é uma resposta perfeita, mas pode estimular outras idéias.

A solução de Delilah, funciona apenas um pouco simplificado grandes para mim e também resolve problema de Mercator. 

div { cursor: default; }
div * { cursor: auto; }

O problema é que você tem que criar outro arquivo css e endereço-lo usando comentários condicionais não para frear outros browsers.

PS:. Esta questão torna-se muito chato com sites fundo escuro

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top