Cursore di selezione testo CSS ie7, comportamento strano

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

  •  06-07-2019
  •  | 
  •  

Domanda

Uno strano qui, nella speranza di ottenere un feedback per indicarmi la giusta direzione.

Se il mio #wrapper o una qualsiasi delle div secondarie non ha un colore di sfondo applicato, ie7 cambia il normale "puntatore"; cursore in un " text-select " cursore quando si passa il mouse sulla pagina (se si passa dal mouse al testo o meno).

Pensavo di aver risolto il problema un po 'di tempo fa, ma quando rimuovo il colore di sfondo dal mio #wrapper o da qualsiasi div dei bambini, il problema riappare.

Sto solo cercando alcuni suggerimenti o cosa dovrei controllare. 

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

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

Modifica

Sembra essere perché i div "hasLayout", ma non sono ancora sicuro di come risolverlo. Vedi questo link.

MODIFICA 2:

Non riesco a trovare ulteriori informazioni su questo bug " ie7. " Chiunque abbia qualche idea, o anche se sei a conoscenza di questo bug e può semplicemente farmelo sapere, quindi so che non sono pazzo. Mi sto davvero frustrando di nuovo con Microsoft. Mi è già costato qualche ora in più di lavoro questa settimana. Sembra che non finisca mai.

MODIFICA 3:

Ecco un altro link di qualcuno che ha lo stesso problema.

MODIFICA 4:

STACKOVERFLOW.com soffre di questo errore! Allo stesso modo mashable.com . Garantisco che MOLTI sviluppatori web hanno questo bug sul loro sito e non lo sanno nemmeno.

Scoprilo tu stesso ... posiziona il cursore sulla pagina di entrambi i siti. Si noti che si trasforma in un cursore di selezione del testo quando non dovrebbe.

Sembra che sarebbe facile risolverlo con la proprietà cursore , ma il problema potrebbe innescare il comportamento corretto del cursore di selezione del testo quando richiesto.

È stato utile?

Soluzione

È troppo confuso per indicare esplicitamente quale cursore dovrebbe andare dove? 

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 ..

Altri suggerimenti

Sono abbastanza sicuro di averlo mai incontrato prima, ma probabilmente è un po 'troppo sottile per notarlo davvero durante alcuni test superficiali del browser. Ma ho sicuramente risolto anche i problemi impostando un colore di sfondo.

Per quanto ne so, il modo migliore per risolverlo è posizionare l'elemento che causa i problemi o aggiungere un div wrapper posizionato attorno ad esso. Molto probabilmente useresti position: relative , anche se absolute e fixed dovrebbero funzionare anche.

Il posizionamento dell'elemento stesso di solito funziona, ma l'aggiunta di un div wrapper potrebbe funzionare in modo più coerente.

es. l'aggiunta di position: relative alla classe .post-text corregge il cursore sulle domande e le risposte in questa pagina.

La GIF trasparente 1x1 px funziona ed è anche un'ottima soluzione per Questo e altri bug in IE da 6 a 8. Aggiungerei qualcosa del genere ai miei commenti condizionali per tutti gli IE: 

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

Hai provato a impostare background-color: transparent; esplicitamente? Questo aiuta?

Potrebbe sembrare un brutto hack, ma hai provato a impostare un GIF trasparente 1x1 px (spaziatore AKA) come sfondo?

Questo non è perfetto, ma per questo piccolo esempio sembra funzionare per 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>

Non ho idea del perché questo sembra funzionare e non è certamente l'ideale. Per qualche motivo, posizionando l'elemento p in un div relativamente posizionato in linea, il cursore del mouse si comporta più come mi aspetterei.

Non sono sicuro che funzioni in un senso più ampio anche se c'è una gerarchia di elementi.

Mi rendo conto che questa non è una risposta perfetta, ma potrebbe stimolare altre idee.

La soluzione di Delilah, solo un po 'semplificata funziona alla grande per me e risolve anche il problema del mercatore. 

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

Il problema è che devi creare un altro file CSS e risolverlo usando i commenti condizionali per non frenare altri browser.

PS: questo problema diventa molto fastidioso con i siti Web di sfondo scuro.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top