2012-07-28 18 views
14

Selezione del testo Evidenziazione eccessiva su entrambi i lati a causa del riempimento.Selezione del testo Evidenziazione eccessiva

Text Selection Example

http://jsfiddle.net/JamesKyle/pA7BJ/

Come posso risolvere questo problema usando i CSS? Ho provato un sacco di cose diverse, nessuna delle quali sembra funzionare. (cioè cercando di usare il margine e altre proprietà).

Ho incontrato più volte questo problema e non sono mai riuscito a capirlo.

Se qualcuno mi può mostrare come risolvere questo problema e magari spiegare come viene calcolato l'evidenziazione della selezione del testo, lo apprezzerei molto.

Sembra che questo non si verifichi in Firefox/Opera (non può testare IE), e potrebbe essere limitato ai browser basati su webkit.

risolto:

Aggiungi position: relative a tutti gli elementi imbottiti (questo è probabilmente un bug WebKit).

http://jsfiddle.net/JamesKyle/ejfsM/

+0

Che browser? In Firefox 14 e IE9, ottengo una selezione normale, cioè, solo il modo normale di selezionare il testo. Nell'ultima versione di Chrome, ottengo ciò che mostra la tua immagine. –

+0

Credo che l'evidenziazione sia gestita dal browser. Suppongo che tu stia utilizzando Chrome. Se provi la stessa cosa con Firefox, noterai che viene evidenziato solo il testo. – Zhihao

+0

Okay, come posso renderlo coerente su tutti i browser (incluso il webkit)? –

risposta

8

Questo è strano. Tuttavia, cambiando posizione CSS sembra funzionare, ad es .:

div.sizing-container { 
    padding: 75px; 
    position: relative; 
} 

http://jsfiddle.net/LJLdW/

Non so se questo è possibile nella vostra situazione.

+0

Certamente dispari. Provalo impostandolo come dici, poi resettando e funziona ancora. Provalo su 'h1' e il divario tra' h1' e prima 'p' ha ancora il problema: http://jsfiddle.net/pA7BJ/18/ –

+0

Impostazione del wrapper per i lavori relativi per me: http://jsfiddle.net/LJLdW/ –

+0

Sembra ripararlo. –

0

Cambiare l'imbottitura di div.sizing-container-75px 0px 75px 0px sarebbe risolvere questo problema. L'evidenziazione è così grande a causa del riempimento su questo elemento.

allora avete bisogno di cambiare aggiuntivo:

width: 93%; 
padding-left: 3%; 

al corpo. E quindi aggiungere 10px padding a .sizing-container

Questo lo aggiusta per me. Questo è tutto quello che posso dire.

+0

Questa non è davvero una soluzione ... –

+0

Beh, non è così male. Scusa, almeno ci ho provato. – Shawn31313

Problemi correlati