2009-10-25 14 views
6

Strano qui, sperando di ottenere un feedback per indicarmi la giusta direzione.Cursore di selezione del testo CSS ie7, comportamento strano

Se il mio #wrapper o una delle divs figlio non ha applicato un colore di sfondo, ovvero 7 cambia il normale cursore "puntatore" in un cursore "selezione testo" quando si muove il mouse sulla pagina (se si passa il mouse sul testo o no).

Ho pensato di aver risolto il problema un po 'di tempo fa, ma quando rimuovo il colore di sfondo dal mio o da una qualsiasi delle div di bambini, il problema riappare.

Solo cercando qualche suggerimento 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; 
} 

EDIT:

sembra essere perché il div "hasLayout", ma non sono ancora sicuro di come risolvere il problema. Vedere this link.

EDIT 2: "bug IE7"

non riesco a trovare più informazioni Chiunque abbia qualche idea, o anche se sei a conoscenza di questo bug e me lo fa sapere, so che non sono pazzo. Mi sto davvero frustrando di nuovo con Microsoft. Questa settimana mi sono già costate un paio d'ore di lavoro in più. Sembra che non finisca mai.

EDIT 3:

Ecco another link di qualcuno che ha lo stesso problema.

EDIT 4:

STACKOVERFLOW.com soffre di questo bug! Così fa mashable.com. Garantisco MOLTI web devs hanno questo bug sul loro sito e non lo sanno nemmeno.

Dai un'occhiata a te stesso ... passa il cursore sulla pagina di entrambi i siti. Si noti che si trasforma in un cursore di selezione testo quando non dovrebbe.

Sembra che sia facile da risolvere con la proprietà cursor, ma il problema potrebbe attivare il corretto comportamento del cursore di selezione testo quando richiesto.

+0

Potrebbe puntare per un esempio dal vivo? Non sono sicuro che il problema sia in quelle righe ... –

+0

Sì, esempio dal vivo sul link che ho appena postato. Scarica il file nella pagina di test e apri 'er up in ie7 per vederlo in prima persona. – Jeff

+0

Non sei pazzo. E ho trovato altri problemi che ha cause Loutout, ma ancora nessuna soluzione. – tahdhaze09

risposta

3

È troppo hacky indicare in modo esplicito quale cursore deve 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; 
} 

ecc ..

+0

Questo ancora non lo risolve interamente. Il cursore di testo viene quindi visualizzato sull'intero blocco, inclusi eventuali padding e spazi vuoti su una riga parzialmente riempita, ad esempio, anziché solo il testo effettivo. – mercator

+0

concordato. Ottima idea, una che ho già provato, ma non taglia per il motivo citato da Mercator. – Jeff

+0

Hmmm, ne ha bisogno * che * preciso, vero? Oh caro .. per favore vedi il mio commento sulla domanda richiedendo un po 'più di informazioni sul ragionamento. – Zoe

0

Hai provato a impostare background-color:transparent; in modo esplicito? Questo aiuta?

+0

Yeppers, l'ho provato. Non funzionaImmagino spero che qualcuno possa darmi qualcosa a "Google". Sembra strano che non molte persone hanno sperimentato questo prima. – Jeff

+0

Peccato: pensavo che trasparente sarebbe stato abbastanza "di sfondo" per evitare che accadesse. Suppongo che tu non voglia alcun background? Altrimenti, è possibile aggiungerne uno in un foglio di stile IE7 tramite commenti condizionali. Sembra uno di quei bug di rendering per i quali non ci sono soluzioni alternative decenti. (Javascript?) Scusa non ho potuto aiutare. – stephenhay

+0

Sì, la mia unica idea è di far saltare il mio CSS e mettere un 'background-color' che corrisponda alla parte principale del mio sito: JUST FOR IE7, Lol. – Jeff

0

Questo può sembrare un brutto trucco, ma hai provato a impostare un GIF trasparente 1x1 px (spaziatore AKA) come sfondo?

+0

Non ho provato, ma se si tratta di questo, penso che preferirei semplicemente impostare un colore di sfondo, invece. Buon suggerimento, però. – Jeff

+0

Questo suona bene. @ Jeff: è stato d'aiuto? –

0

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 ragione, l'inserimento dell'elemento p in una posizione posizionata in posizione div distorta rende il puntatore del mouse più simile a quanto mi aspetterei.

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

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

1

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

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

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

E.g. aggiungendo position: relative alla classe .post-text si corregge il cursore sulle domande e risposte su questa pagina.

+0

Aggiunta della posizione ': relativa;' al mio # wrapper non ha fatto alcuna differenza per me. Per quanto riguarda il wrapping del mio wrapper, beh, immagino che preferirei vivere con la stranezza del cursore. =) – Jeff

+0

Abbastanza giusto. Sono curioso, però, l'aggiunta del wrapper posizionato in più lo risolve? – mercator

0

soluzione di Delilah, solo un po 'opere semplificate grandi per me e risolve anche questione di Mercator.

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

Il problema è che bisogna creare un altro file css e affrontare usando i commenti condizionali non freni altri browser.

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

1

I 1x1 px trasparenti opere GIF ed è anche un ottimo correzione per This e altri bug in IE 6 a 8. Vorrei aggiungere qualcosa di simile ai miei commenti condizionali per tutti IE:

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